我确信这一定是一个常见的问题,但经过多次搜索我无法找到答案。 我有一个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);
}
但是,这只会在所有处理完成后更新。在代码执行时如何强制重绘条形图?
非常感谢!
答案 0 :(得分: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毫秒),以重新绘制加载栏。