javascript - 长javascript计算期间的css进度条

Question

将 javascript 与 jquery 和 bootstrap 一起使用，我希望在繁重的 javascript 计算期间有一个不错的进度条。我确切地知道计算的进度状态，但 CSS 在计算期间没有更新。

WebWorker 不是一个解决方案，因为我需要在主线程中使用一个模型，我无法轻松地将其复制/克隆到工作线程。

示例：进度条在最后更新。我希望它在此过程中更新。

http://jsfiddle.net/K48B2/

html代码：

<div class="progress">
    <div id="loading" class="bar progress-bar progress-bar-info" style="width: 0%"></div>
</div>

javascript代码：

for (var i = 0; i <= 10; i++) {
    $('#loading').css('width', i * 10 + '%');
    heavycomputation();
};

Answer 1

Oleq 提出了这个解决方案，它有效...... jsfiddle.net/nNZCE

function heavycomp(millis, progress) {
    var date = new Date();
    var curDate = null;
    do {
        curDate = new Date();
    }
    while (curDate - date < millis);

    if ( progress > 10 )
        return;

    setTimeout( function() {
        console.log( progress );
        $('#loading').css('width', progress * 10 + '%');
        heavycomp( 200, ++progress );
    }, 200 );
}

heavycomp( 200, 0 );

Answer 2

这更接近您正在寻找的东西吗？

function heavycomp(millis) {
    var date = new Date();
    var curDate = null;
    do {
        curDate = new Date();
    }
    while (curDate - date < millis);
}

$(function() {
    for (var i = 0; i <= 100; i++) {
        setTimeout(function (i) {
           return function() {
                $('#loading').css('width', i + '%');
                $('#value').html(i + '%');
                console.log(i + '%');
                heavycomp(200);               
           }
        }(i),i * 200);  
    }    
});