有人可以调试我的 Javascript 小程序中的进度条问题吗？

Question

这是小程序

您可以保留所有设置不变，然后点击“计算”。几秒钟后，您应该会看到一些图表出现，然后“计算”按钮下方的进度条将填充到 100%。

问题是我希望进度条在代码运行时增加，而不是在绘图完成后增加。我知道代码很长，但是您可以搜索以下进度条代码：

setTimeout( update(count++, L.length, f.length, phi.length) );

它访问直接在主calculate()函数之前定义的函数update(s,x,y,z)。

我只是很困惑为什么进度条在所有处理完成之前不会更新。

提前致谢！

Answer 1

您观察到的问题是由 javascript 的单线程性质引起的。执行现有代码时不会执行超时。引入 Web Worker 就是为了处理这种类型的限制。如果您无法使用 Web Worker（例如由于 IE 限制），则使用超时是模拟多线程的唯一方法。

要检查这一点，您可以将行替换为 update(count++, L.length, f.length, phi.length)() 并将 update 更改为将值记录到控制台。

至于当前的更新实现，我想要么是 jquery 内部有一些迷你计时器导致了问题，要么是浏览器渲染功能由于某种原因不可用:)。

原因是你的计算和绘图所花费的时间远远少于超时时间。因此，当执行超时函数时，所有内容都已绘制完毕。
您可以通过用 update(count++, L.length, f.length, phi.length)() 替换您的行来验证这一点 - 它将导致即时更新高达 100%。

为了使进度条工作更精确，您应该检查您的计算代码并尝试以块友好的方式重写它。我的意思是有可能逐块执行计算并在每个块末尾更新进度条。完成后，您可以使用计时器来评估一切。

示例：

(function(){
    var arr = [1,2,3,4];
    (function popLog(){
        console.log(arr.pop());
        if (arr.length > 0){
            setTimeout(popLog, 100);
        }
    })();
})()

另一种方法是使用 Web Workers，不时查询状态并适当更新进度栏。但是，IE 不支持它们。