2

これはよくある問題だと思いますが、よく調べても答えが見つかりません。計算の各段階が完了した後に更新したいtwitter-bootstrapローディングバーがあります。

ローディングバーを更新するための関数は次のとおりです。

var lb = $('#loading-bar');
var lbc = 0;

function increment_loading_bar(pc) {
    setTimeout(function(){
        lbc = lbc + pc;
        lb.width(lbc+"%");;
    }, 1);
}

そして、バーを更新するための呼び出しは.each（）ループ内にあります

var inc = 100/array.length();

$.each(array,function(index,element){
    increment_loading_bar(inc/2);

    //
    //Gnarly processing ....
    //

    increment_loading_bar(inc/2);
}

ただし、これはすべての処理が終了した後にのみ更新されます。コードの実行時にバーを強制的に再描画するにはどうすればよいですか？

どうもありがとう！

4

1 に答える 1

1

私の質問で言ったように、コードが実行されるときに/redraw/を強制する必要があります

私の知る限り、プロセスを時々一時停止することによって、間接的に再描画を強制することしかできません。たとえば、次のようになります。

var inc = 100/array.length();
var processQueue = array;
var currentIndex;

setTimeout(runProcess, 5);

function runProcess() {
   var element = processQueue[currentIndex];

   // Process the element here
   // ....

   increment_loading_bar(inc);

   currentIndex++;

   if (currentIndex < processQueue.length) {
      setTimeout(runProcess, 5);
   } else {
      // processing has finished
   }
}

このようにして、各ステップの間にブラウザに時間（この例では5ms）を与えて、ロードバーを再描画します。

于 2013-01-15T10:49:35.517 に答える