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

Question

Here is the applet

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

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

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

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

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

提前致谢!

Answer 1

您观察到的问题是由 javascript 的单线程特性引起的。执行现有代码时不会执行超时。 Web worker 被引入来处理这种类型的限制。如果您无法使用网络 worker (例如，由于 IE 限制)，使用超时是模拟多线程的唯一方法。

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

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

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

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

示例:

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

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