Question

我有一个进度条，我在多次迭代循环中更新。

https://jsfiddle.net/k29qy0do/32/ （在单击开始按钮之前打开控制台）

var progressbar = {};

$(function () {

    progressbar = {

        /** initial progress */
        progress: 0,

        /** maximum width of progressbar */
        progress_max: 0,

        /** The inner element of the progressbar (filled box). */
        $progress_bar: $('#progressbar'),

        /** Set the progressbar */
        set: function (num) {
            if (this.progress_max && num) {
                this.progress = num / this.progress_max * 100;
                console.log('percent: ' + this.progress + '% - ' + num + '/' + this.progress_max);

                this.$progress_bar.width(String(this.progress) + '%');
            }
        },

        fn_wrap: function (num) {
            setTimeout(function() {
                this.set(num);
            }, 0);
        }

    };

});


$('#start_button').on('click', function () {

    var iterations = 1000000000;

    progressbar.progress_max = iterations;

    var loop = function () {

        for (var i = 1; i <= iterations; i++) {

            if (iterations % i === 100) {

                progressbar.set(i); //only updates the progressbar in the last iteration

                //progressbar.fn_wrap(i); //even worse, since no output to the console is produced

            }
        }
    }

    //setTimeout(loop, 0);
    loop();

});

控制台按预期迭代更新。但是，进度条未更新。

问题是浏览器窗口似乎“挂起”，直到循环结束。只更新控制台，而不是进度条。

我尝试在几个地方添加setTimeout，如下所示。但这只会让事情变得更糟，因为我甚至没有让控制台在执行循环时输出进度。

Answer 1

好的，我在这个问题的答案中找到了解决方案：

Javascript: How to update a progress bar in a 'for' loop

var i = 0;
(function loop() {
    i++;
    if (iterations % i === 100) {
        progressbar.set(i); //updates the progressbar, even in loop    
    }   
    if (i < iterations) {
        setTimeout(loop, 0);
    }
})();

我的解决方案： https://jsfiddle.net/ccvs4rer/3/

Answer 2

我的猜测是所有进度更新都在同一个调用堆栈中运行。当JavaScript代码运行时，DOM无法更新。也许这question会帮助您提出解决方法。

Answer 3

你真正想要的是一个异步循环，允许浏览器在迭代之间更新DOM。

JSFiddle：http://jsfiddle.net/u5b6gr1w/

function delayedLoop(collection, delay, callback, context) {
    context = context || null;

    var i = 0,
        nextInteration = function() {
            if (i === collection.length) {
                return;
            }

            callback.call(context, collection[i], i);
            i++;
            setTimeout(nextInteration, delay);
        };

    nextInteration();
}

一些HTML：

<div class="progress-bar"><div style="width: 0"></div></div>

CSS的引人注目：

.progress-bar {
    border: 1px solid black;
    background-color: #f0f0f0;
}
.progress-bar div {
    background-color: red;
    height: 1.25em;
}

还有一些JavaScript可以将事物连接在一起：

var progressBar = document.querySelector(".progress-bar div"),
    items = [1,2,3,4,5,6,7,8,9,10];

delayedLoop(items, 500, function(item, index) {
    var width = (item / items.length * 100) + "%";
    progressBar.style.width = width;
    progressBar.innerHTML = width;
});

Answer 4

让我们将其分解为步骤

第1步：清理HTML

假设您的问题的目的是了解如何处理进度条而不是样式或标签（加载，请耐心等）。让我们只有进度条和开始按钮。

<div id='progressbar-outer' style="">
    <div id='progressbar' style=""></div>
</div>
<button id="start_button">Start</button>

第2步：样式

让我们向用户显示进度条

#progressbar-outer {
    height:2em;
    border:5px solid #000;
    width:15em;
}
#progressbar {
    width:0%;
    background-color:#F00;
    height:100%;
}

第3步：使用`setTimeout`所属的地方

在您的代码中，您已使用setTimeout设置进度条的值。但是，for循环仍处于活动状态。

for (var i = 1; i <= iterations; i++) {

    if (iterations % i === 100) {

        progressbar.set(i); //only updates the progressbar in the last iteration

        //progressbar.fn_wrap(i); //even worse, since no output to the console is produced

        //setTimeout(function() {
        //  progressbar.set(i);
        //}, 0);

    }
}

使用setTimeout不会影响其余代码。因此，UI被保留为人质直到循环结束。请尝试以下代码。

$('#start_button').on('click', function () {

    var iterations = 100;

    progressbar.progress_max = iterations;

    var loop = function (value) {
        progressbar.set(value);
        if (value < iterations) setTimeout(function () {
            loop(value + 1)
        }, 30);
        else $('#progressbar').css('background-color', '#0F0');
    }


    loop(1);

});

预览

试试这个小提琴：https://jsfiddle.net/Ljc3b6rn/4/

Answer 5

你有什么要做的？你为什么需要它？当您必须等待某些事情完成时，您应该只使用进度条。但我们不知道你在网页上做了什么。

如果您想显示ajax上传的进度：

$.ajax({
    ...
    xhr: function() {
        var xhr = $.ajaxSettings.xhr();
        $(xhr.upload).bind("progress", function(event) {
            var e = event.originalEvent;
            var percent = 0;
            if (e.lengthComputable)
                percent = Math.ceil(e.loaded/e.total*100);
            $("#progress").width(percent+"%");
        });
        return xhr;
    }
    ...
});

对于图像，您需要ajax调用：

$.ajax({
    method: "GET",
    url: "http://example.com/path/image.jpg",
    xhr: function() {/* see the code above*/ }
    ...
});

获取上传文件的内容：

var reader = new FileReader();
reader.readAsText(uploadedFile);
$(reader).bind("progress", function(e) {
    var percent = 0;
    if (e.lengthComputable)
        percent = Math.ceil(e.loaded/e.total*100);
    $("#progress").css("width", percent+"%");
});

对于大量的过程，比如数学或附加很多需要10多个secons的div：

Main.js：

var worker = new Worker("Worker.js");
$(worker).bind("message", function(data) {
    $("#progress").width((data*100)+"%");
});

Worker.js：

var total = 43483,
    finished = 0,
    doStuff = function() {
        ++finished;
        return 1+1;
    };
setInterval(function()
{
    self.postMessage(finished/total);
}, 100);
for (var i = 0; i < total; ++i)
    setTimeout(doStuff, i*10);

因为它很好，而且你想告诉用户没有进展，只需为div设置动画：
```
$("#progress").animate({width: "100%"}, 3000);
```

Answer 6

您可以使用promises等待宽度设置，然后再继续循环如果逐一进行，则更新1000000000次迭代的进度条将会很慢，因此您可能会发现降低更新频率很有用。
我没有使用for循环，而是使用了一个递归函数，该函数在履行承诺时循环。

    set: function (num) { 
        var deferred = $.Deferred(); 
        if (this.progress_max && num) {
            this.progress = num / this.progress_max * 100;
            var self = this; 
            self.$progress_bar.animate({"width": String(this.progress) + '%'}, "fast", function() {  
                deferred.resolve(); 
            }); 
            return deferred; 
        }
    }

$('#start_button').on('click', function () {

    var iterations = 1000000000;
    var i = 0; 
    progressbar.progress_max = iterations;

    var loop = function(){
        i+=100000000; 
        if(i <= iterations){
            progressbar.set(i).then(function(){ 
                loop(); 
            }); ;         
        }
    }; 

    loop();
});

https://jsfiddle.net/k29qy0do/34/

Answer 7

您必须使用window.requestAnimationFrame，否则浏览器将阻止，直到您的循环结束。传递给requestAnimationFrame的回调将获得一个时间戳作为参数，您可以将其用于计算进度。

Answer 8

这是我对问题的看法：

使用web worker。 webworker blob代码来自here

Web worker代码：

<script type="text/ww">    
    function loop(e) {
        var data = JSON.parse(e.data);
        var i = parseInt(data.i, 10);
        var iterations = parseInt(data.iterations, 10);

        while (iterations % ++i !== 100 && i <= iterations);

        if(i <= iterations) {
            self.postMessage(JSON.stringify({ i: i, iterations: iterations }));
        }
    }

    self.onmessage = function(e) {
        loop(e);
    };
</script>

代码：

var ww = document.querySelector('script[type="text/ww"]'),
    code = ww.textContent,
    blob = new Blob([code], {type: 'text/javascript'}),
    blobUrl = URL.createObjectURL(blob),
    worker = new Worker(blobUrl);

worker.onmessage = function(e) {
    var data = JSON.parse(e.data);
    var i = parseInt(data.i, 10);
    var iterations = parseInt(data.iterations, 10);

    progressbar.set(i);

    worker.postMessage(JSON.stringify({ i: i, iterations: iterations }));
}

$('#start_button').on('click', function () {

    var iterations = 1000000000;

    progressbar.progress_max = iterations;

    worker.postMessage(JSON.stringify({ i: 0, iterations: iterations }));
});

other idea挂起UI线程，但会直观地更改宽度，因为我使用requestAnimationFrame来中断计数，更改进度条的宽度，然后继续计数。

function loopFrame(i, iterations) {
    requestAnimationFrame(function() {
        if (iterations % i === 100) {
            progressbar.set(i);
        }

        if(i < iterations) {
            loopFrame(i + 1, iterations);
        }
    });
}

$('#start_button').on('click', function () {
    var iterations = 1000000000;

    console.log(iterations);

    progressbar.progress_max = iterations;

    loopFrame(0, iterations);

});

Answer 9

也许这会有用。

var service = new Object();

//function with interrupt for show progress of operations
service.progressWhile = new Object();
service.progressWhile.dTime = 50; //step ms between callback display function
service.progressWhile.i = 0; //index
service.progressWhile.timer = 0; //start time for cycle

//@parametr arr - array for actions
//@parametr actionCallback - The function for processing array's elements
//@parametr progressCallback - function to display the array index

function progressWhile(arr, actionCallback, progressCallback) {
    try {
        var d = new Date();
        service.progressWhile.timer = d.getTime();
        log(service.progressWhile.i);
        if (service.progressWhile.i >= arr.length) {
            service.progressWhile.i = 0;
            return;
        }

        while (service.progressWhile.i < arr.length) {
            actionCallback(arr[service.progressWhile.i++]);
            d = new Date();
            if (d.getTime() - service.progressWhile.timer > service.progressWhile.dTime) {
                break;
            }
        }
        if (progressCallback != undefined)
            progressCallback(service.progressWhile.i);
    } catch (er) {
        log(er);
        return;
    }

    setTimeout(function () {
        progressWhile(arr, actionCallback, progressCallback);
    }, 0);
}

Answer 10

这是更新的小提琴

我使用animate将它变成了一个像外观和感觉一样的进度条。希望这会对你有所帮助。

ggplot2

Fiddler

var progressbar = {};

$(function() {

    progressbar = {
        /** initial progress */
        progress : 0,
        /** maximum width of progressbar */
        progress_max : 0,
        /** The inner element of the progressbar (filled box). */
        $progress_bar : $('#progressbar'),
        /** Method to set the progressbar.*/
        set : function(num) {
            if (this.progress_max && num) {
                this.progress = num / this.progress_max * 100;
                console.log('percent: ' + this.progress + '% - ' + num + '/' + this.progress_max);

                $('#progressbar').animate({
                    width : String(this.progress) + '%',
                }, 500, function() {
                    // Animation complete.
                });
            }
        },

        fn_wrap : function(num) {
            setTimeout(function() {
                this.set(num);
            }, 0);
        }
    };

});

$('#start_button').on('click', function() {
    $('#progressbar').css('width', '0%');
    var iterations = 1000000000;
    progressbar.progress_max = iterations;
    var loop = function() {
        for (var i = 1; i <= iterations; i++) {
            if (iterations % i === 100) {
                progressbar.set(i);
                //only updates the progressbar in the last iteration
            }
        }
    }
    loop();
});

更新每个循环中的进度条

10 个答案:

第1步：清理HTML

第2步：样式

第3步：使用`setTimeout`所属的地方

预览

更新每个循环中的进度条

10 个答案:

第1步：清理HTML

第2步：样式

第3步：使用setTimeout所属的地方

预览

第3步：使用`setTimeout`所属的地方