2

jquery とブートストラップで JavaScript を使用して、大量の 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();
};
4

2 に答える 2

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 );
于 2013-08-12T14:30:13.317 に答える
0

これはあなたが探しているものに近いですか？

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);  
    }    
});
于 2013-08-05T14:01:22.137 に答える