在 Chrome 和 Safari 中更新 HTML 不会立即更新网站答案

【问题标题】：Updating HTML doesn't update website immediately in Chrome and Safari在 Chrome 和 Safari 中更新 HTML 不会立即更新网站
【发布时间】：2020-07-25 20:24:50
【问题描述】：

我的 HTML 代码中有两个输出，如下所示：

Loaded: <output id="loaded"> 0 </output>
Requested: <output id="requested"> 0 </output>

它们向用户显示已经加载了多少文件以及请求了多少文件，因此用户可以估计加载完成的时间。在 Javascript 中，我使用这个函数来更新数字：

function updateLoadNumbers() {
    document.getElementById("loaded").value = loadedObjects;
    document.getElementById("requested").value = requestedObjects;
}

loadedObjects 和 requestedObjects 已正确更新，在控制台中打印出来即可确认。问题是，这在 Firefox 中运行良好，但 Chrome 和 Safari 不会立即显示更新后的数字，它们只会在加载所有文件时显示。

每个文件都使用以下代码加载：

function loadFileAsText(filename, callback) {
  var req = new XMLHttpRequest();
    req.open("GET", filename + "?antibuffer=" + Math.random(), false);
    req.onload = function() {
    if(req.status >= 200 && req.status < 300 || req.status == 0)
      callback(req.responseText);
    else
      console.error(req.statusText, req.responseText);
    };
    req.send();
}

【问题讨论】：

标签： javascript html google-chrome safari

【解决方案1】：

问题是您已经使 ajax 请求同步：

req.open("GET", filename + "?antibuffer=" + Math.random(), false);
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^

这本质上从来都不是正确的做法。它会锁定大多数浏览器的 UI，因为它会阻塞 JavaScript 代码和页面绘制都在其上运行的线程。

关闭该标志，使其默认为true（异步请求）。

【讨论】：