有没有办法仅在更新文件而不是 html onload= 时运行异步函数答案

【问题标题】：Is there a way to run an async function only when a file is updated instead of html onload=有没有办法仅在更新文件而不是 html onload= 时运行异步函数
【发布时间】：2021-12-28 18:07:16
【问题描述】：

我正在使用此代码将每分钟更新一次的 .json 文件输入到根据 .json 数据更改图像的函数中。问题是我调用了带有 onload= html 属性的函数，它连续运行异步函数，这会消耗大量性能。

'''

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="text/javascript" src="profile.json"></script>
        <script type="text/javascript">
            
            async function request() {
                
                const image = document.getElementById("RankImg");                                                                   ///set img var
                const text = document.getElementById("ValoRank")

                    fetch("profile.json")
                        .then(response => response.json())
                        .then(data => {
                            console.log(data.response)
                            var requestrank = data.response.substring(0, 4)
                            console.log(requestrank)
                            switch (requestrank) {                                                                                           ///switch start
                                case "Iron":
                                    image.src = 'Images/Iron.png' ;
                                    text.innerHTML = data.response ;
                                    break;
                                case "Bron":
                                    image.src = 'Images/Bronze.png' ;
                                    text.innerHTML = data.response ;
                                    break;
                                case "Silv":
                                    image.src = 'Images/Silver.png' ;
                                    text.innerHTML = data.response ;
                                    break;
                                case "Gold":
                                    image.src = 'Images/Gold.png' ;
                                    text.innerHTML = data.response ;
                                    break;
                                case "Plat":
                                    image.src = 'Images/Platinum.png' ;
                                    text.innerHTML = data.response ;
                                    break;
                                case "Diam":
                                    image.src = 'Images/Diamond.png' ;
                                    text.innerHTML = data.response ;
                                    break;
                                case "Immo":
                                    image.src = 'Images/Immortal.png' ;
                                    text.innerHTML = data.response ;
                                    break;
                                case "Radi":
                                    image.src = 'Images/Radiant.png' ;
                                    text.innerHTML = data.response ;
                                    break;
                                default:
                                    image.src = 'Images/Base.png' ;
                            }
                        })               
            }                                                                                                       ///Twitch.tv/QuentinCly

        </script>                                           
    </head>
    <body>

        <img src="Images/Base.png" alt="Valorant Rank" id="RankImg" onload="request().catch(error => {
            console.error(error);
        })">

    <h1><span id="ValoRank">Valorant Rank </span></h1>

    </body>
</html>

''' 我不想通过 onload 调用 request() 函数，我想在 profile.json 更新后调用它。

【问题讨论】：

UI 不知道文件是否已更新。唯一知道的方法是检查它。或者我不确定你真正要问的是什么。
我基本上想以比 onload 更优化的方式调用函数，因为它会无限期地重复函数
所以只需在页面加载或文档准备就绪时调用脚本，或者将脚本放在图像之后。
喜欢把脚本放在html图片之后？并保持加载？它不会一直做同样的事情
没有onload，直接打电话request()

标签： javascript html json asynchronous

【解决方案1】：

您遇到的问题是每次加载新图像 src 时，它都会触发一个新的 onload 事件。因此，如果您不希望这种情况发生，您可以删除内联事件侦听器

const image = document.querySelector("img");

function request() {
  console.log('loaded');
  image.onload = null;
  image.src="http://placekitten.com/200/400";
}

&lt;img onload="request()" src="http://placekitten.com/200/300" /&gt;

或者用window onload绑定事件

window.addEventListener("load", request);

或者图片在页面上之后调用脚本

<img />
<script>request();</script>

【讨论】：