更新jQuery .each（）中的加载栏

Question

我确信这一定是一个常见的问题，但经过多次搜索我无法找到答案。 我有一个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);
}

但是，这只会在所有处理完成后更新。在代码执行时如何强制重绘条形图？

非常感谢！

Answer 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毫秒），以重新绘制加载栏。