Question

我目前正在使用JavaScript进行一些练习（Euler问题），并决定尝试为使用嵌套循环的问题创建进度条并花费几秒钟。它只是一个空的进度条的图像，它在一个完整的下面分层，JavaScript函数设置为定期更改整个条的宽度。

但是，在完成所有计算之后，似乎不会发生这种变化。 JavaScript在进行计算时是否将DOM操作置于保持状态？如果是这样，有一个简单的方法吗？

这是我正在运行的代码。

JavaScript代码：

    function updateProgress(calc){
        var recorded_calculations = 90357988; //(pre-recorded number)
        var percent = (calc / recorded_calculations) * 100;
        document.getElementById("full-bar").style.width = percent + "%";
        if(percent == 100){
            return;
        }
        setTimeout(function(){
            updateProgress(calculations);
        }, 1);
    }

    var calculations = 0;

    updateProgress(calculations);

    for(lots of increments){
        calculations++;
        //Logic here
        for(lots of increments and){
            calculations++;
            //Logic here

和CSS代码：

#background-bar{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
}

#full-bar{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    width: 0%;
    overflow: hidden;
}

Answer 1

在执行计算时，UI将被阻止。

我最近回答了一个非常相似的问题。

https://stackoverflow.com/a/37092024/4567456

这同样适用于此。

Answer 2

JavaScript是单线程的。如果在预期调用Timeout时正在执行某些其他代码，它将等到调用超时函数之前完成...

所以基本上你的for循环将阻塞updateProgress函数，直到它完成，因此它没有太多用作进度条。

大多数项目的euler问题都是这样的，通过高效的算法，运行大多数问题几乎是即时的。如果您要创建进度条来跟踪需要很长时间才能完成的问题，那么这可能意味着您可以/应该找到更好的解决方案。

如果您想更新从for-loop中调用该函数所需的进度。

你可以调用更新进度if（calculate％1000 === 0）或其它东西，以便它不会一直调用它。

Javascript - 在进行计算时操作DOM

2 个答案: