简单 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 可能会起作用。

您必须定期检查是否满足显示进度的条件，例如，在 for 循环中：

if (n % 500 === 0) progress(mLog, message);

Answer 2

请检查递归的异步方式：

var mLog=document.getElementById("log");
var n = 2;
function progress (mLog,message)
{  
  mLog.innerHTML+=message;
}
function asyncLoop(n) {
  if(n >=10000) return;
  //calc_power=chi_power(n,w,df,delta1,alfa);
  var message="n="+n+"<br>";
  progress(mLog,message);
  window.setTimeout(asyncLoop(n*2), 0);

}
asyncLoop(n);

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

Answer 3

循环是同步的，所以它会运行直到它在执行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>

简单 Javascript 更新长计算进度 HTML

Simple Javascript update long calculation progress in HTML

javascript

html

logging

progress