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

Question

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

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 页面更新仅在循环结束后才会完成...

Answer 1

循环是同步的，因此它将一直运行，直到在执行 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>