Question

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

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

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

它访问直接在main calculate（）函数之前定义的函数update（s，x，y，z）。

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

提前致谢！

Answer 1

您观察到的问题是由javascript的单线程性质引起的。执行现有代码时不会执行超时。引入Web工作者来处理这种类型的限制。如果您无法使用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不支持它们。

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

1 个答案: