javascript - 更新 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

As I said in my question, the /redraw/ needs to be forced as the code is executed

据我所知，您只能通过偶尔暂停您的进程来间接强制重绘。例如像这样:

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 毫秒)来重绘加载栏。