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

这样，您可以在每一步之间给浏览器一些时间（在本例中为 5 毫秒）以重绘加载栏。

于 2013-01-15T10:49:35.517 回答