javascript - 简单的Javascript更新HTML中的长时间计算进度

我正在运行一个长循环，需要报告循环的进度。

var mLog=document.getElementById("log");
for (n = 2; (n<10000 && calc_power<power); n=n*2)
{
  calc_power=chi_power(n,w,df,delta1,alfa);
  var message="n="+n+"<br>";
  window.setTimeout(progress(mLog,message), 0);
}

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

我按照建议使用了window.setTimeout，但是HTML页面更新仍然是在循环结束后才完成的。。。

最佳答案

循环是同步的，因此它将一直运行到执行setTimeout()中的任何函数之前结束。
您必须将循环转换为函数，以便它使用setTimeout调用自己：

var mLog = document.getElementById("log");

var w, df, delta1, alfa;            // fake implementation, for demo only
function chi_power(n) { return n; } // fake implementation, for demo only

var calc_power = 0, power = 5000;   // fake data, for demo only

function calculate(n) {
  if (n<10000 && calc_power<power) {
    calc_power=chi_power(n,w,df,delta1,alfa);
    var message="n="+n+"<br>";
    progress(mLog,message);

    // proceed with the loop
    setTimeout(function () { calculate(n*2); }, 0);
  }
}

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

calculate(2);

<div id="log"></div>