JavaScript长循环计算进度无法实时更新HTML页面的问题

你的代码里有两个关键问题，导致页面只能在循环结束后才更新进度：

1. setTimeout的调用方式错误 #

你现在写的window.setTimeout(progress(mLog,message), 0);会立即执行progress函数，然后把它的返回值（undefined）传给setTimeout，相当于根本没利用到setTimeout的异步特性。正确的做法是把函数引用或者匿名函数传给setTimeout，让它在事件循环的下一轮再执行：

// 用箭头函数包裹，传递正确的回调
window.setTimeout(() => progress(mLog, message), 0);

2. 同步循环阻塞了浏览器渲染 #

就算你改对了setTimeout的写法，同步的for循环还是会一口气执行完所有迭代，把所有setTimeout的回调都塞进任务队列，但浏览器要等同步代码全部执行完，才会去处理这些回调并更新页面。这时候你需要把循环改成异步迭代，让浏览器在每次迭代之间有机会渲染页面。

修正后的完整代码示例 #

我们可以把循环改成递归调用的方式，每次迭代后用setTimeout触发下一次：

var mLog = document.getElementById("log");
let n = 2;
// 假设calc_power和power是已定义的变量
let calc_power = 0;
let power = 100;

// 把循环逻辑改成异步递归函数
function asyncLoop() {
  if (n < 10000 && calc_power < power) {
    calc_power = chi_power(n, w, df, delta1, alfa);
    var message = "n=" + n + "<br>";
    // 先更新DOM
    progress(mLog, message);
    // 更新n的值
    n = n * 2;
    // 异步触发下一次循环，给浏览器留渲染时间
    setTimeout(asyncLoop, 0);
  }
}

// 启动异步循环
asyncLoop();

function progress(mLog, message) {
  mLog.innerHTML += message;
}

额外优化：用requestAnimationFrame更流畅 #

如果希望进度更新和浏览器的渲染帧同步，避免不必要的重绘，可以把setTimeout换成requestAnimationFrame：

// 把异步触发的部分换成
requestAnimationFrame(asyncLoop);

这样每次迭代都会等待浏览器完成当前渲染周期后再执行下一次，页面更新会更流畅。

内容的提问来源于stack exchange，提问作者Oren Ben-Harim