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

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

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

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

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

我只是不明白为什么在所有处理完成之前进度条都不会更新

---

提前谢谢

您观察到的问题是由javascript的单线程特性引起的。在执行现有代码时，不会执行超时。引入网络工作者就是为了应对这种类型的限制。如果无法使用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);
        }
    })();
})()

---

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

我不太确定是否遵循。计算可能需要相当长的时间，因为在长度、频率和角度范围内有3个循环。例如，如果将长度从200 mm更改为210 mm，则完成计算应花费约20秒。我不知道更新进度条的超时怎么会比这个慢。我最初的假设似乎不正确-更新了答案。但是，解决方法仍然是一样的——尝试使用times/WebWorkers进行计算。感谢您花时间来研究这个问题。我假设超时确实会像其他代码一样同时执行，所以我想发生的是，在所有计算完成之前，超时不会被处理。我需要它在IE中工作，所以我猜我需要将它分解成块，并使用多个设置超时来控制代码部分的处理顺序？再次感谢，我真的很感激它的主要思想是存储当前的计算状态，并有能力执行基于该状态的计算。您可以在评估步骤之间设置1毫秒的超时，并在每个步骤结束时更新进度条。