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 );