更新jQuery中的加載欄.each（）

我相信這肯定是一個常見問題，但經過多次搜索後我找不到答案。我有一個twitter-bootstrap加載欄，我想在每個計算階段完成後更新。更新jQuery中的加載欄.each（）

這裏是更新加載欄的功能：

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

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

而且調用內。每（）循環是

var inc = 100/array.length(); 

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

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

    increment_loading_bar(inc/2); 
}

但是更新了吧，這只是更新畢竟處理完成。在執行代碼時如何強制重新繪製條形圖？

非常感謝！

來源

2013-01-15 Oddbodbloke

即時錯過一些代碼，因爲你仍然在計算寬度從var inc不會改變你的樣品 – derki

inc是增量而不是絕對值。變量lbc存儲條的當前百分比寬度，並在每次調用increment_loading_bar時由pc遞增。 – Oddbodbloke

以及你知道什麼是你想完成的長度，簡單的存儲array.length，並且每次迭代更新進度條到（iteration/array.length）並且移除該超時值，並且你還應該Math.round寬度值 – derki

正如我在我的問題上，/重繪/說需要作爲代碼執行

據我所知，被強迫，你可以通過在一次暫停的過程只是間接強制重繪而。例如像這樣：

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-15 10:49:35 Tyron

setTimeout是否應該保留在increase_loading_bar函數中？我可能在這裏有點密集，但爲什麼它不適用於只在increment_loading_bar中使用setTimeout？ – Oddbodbloke

不，你不需要那個。我不太確定是什麼原因。也許瀏覽器優化的東西重繪一次JavaScript完成執行或如此。 – Tyron

這幾乎可行！儘管當它應該更新時，當寬度改變時，css動畫/轉換非常不穩定。我試過在這個地方放置一些setTimeouts以允許瀏覽器正確更新，但這一直沒有奏效。 – Oddbodbloke

更新jQuery中的加載欄.each（）

回答

相關問題