Question

使用javascript与jquery和bootstrap，我希望在繁重的javascript计算过程中有很好的进度条。我确切地知道计算的进度状态，但CSS在计算过程中没有更新。

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

实施例： Progressbar最后更新。我希望它在此过程中更新。

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

在长时间的javascript计算期间css进度条

2 个答案: