進度條使用嵌套for循環

Question

循環在兩個不同的陣列，兩個for循環相互嵌套異步（如塊和setTimeoutsourced from here），並試圖用從W3Schools here（標籤之一）進度條的例子。

的來源（稍微修改了 '完成' 回調）異步函數：

function loopAsync(array, fn, done, chunk, context) { 
    context = context || window; 
    chunk = chunk || 10; 
    var index = 0; 

    function doChunk() { 
     var cnt = chunk; 
     while (cnt-- && index < array.length) { 
      // callback called with args (value, index, array) 
      fn.call(context, array[index], index, array); 
      ++index; 
      //console.log("index is " + index); 
      progressBar(index); 
     } 
     if (index < array.length) { 
      // set Timeout for async iteration 
      setTimeout(doChunk, 1); 
     } else { 
      done && done(); 
     } 
    } 
    doChunk(); 
} 

無論是asnychronous，這些是即使與正常for循環同樣的問題：

1. W3School示例使用的是setInterval，這是不準確的，因爲for循環可能已經在setInterval之前完成處理。

2. 有兩個嵌套的for循環，所以不是跟蹤（例如）i在for (var i=0...)，它需要跟蹤的第一循環*對於精度的第二循環的進展（如不出現停止 - 尤其是因爲第二個循環可能會有比第一個更大的數組長度）。

例如：

異步使用上述鏈接例如：

loopAsync(arr1, function (item1) { 
    loopAsync(arr2, function (item2) { 
     //Comparing or processing item1 with item2 
    }); 
}, doNext); 

或者，基本上不異步循環相同的：

for (var item1 = 0; item1 < arr1.length; ++item1) { 
    for (var item2 = 0; item2 < arr2.length; ++item2) { 
     //Doing things... need to track progress of both? 
    } 
} 

需要是通用的，可以用於任何嵌套（或非嵌套）的for-loop歌劇灰。

這些問題應該如何解決，最好不使用jQuery？

Answer 1

我認爲這只是基本的增量。你可以使用這樣的事情：

function progress(total) { 
 
    this.inc = (total !== 0? this.inc || 0: -1) + 1; 
 
    var percentage = Math.floor(this.inc/total * 100); 
 
    document.write('Processing ' + this.inc + '/' + total + ' ' + percentage + '%<br/>'); 
 
} 
 

 
var arr1 = [1,2,3,4,5]; 
 
var arr2 = [1,2,3,4,5,6,7,8,9]; 
 

 
for (var item1 = 0; item1 < arr1.length; ++item1) { 
 
    for (var item2 = 0; item2 < arr2.length; ++item2) { 
 
     progress(arr1.length * arr2.length); 
 
    } 
 
} 
 

 
// reseting counter 
 
progress(0); 
 

 
// count another progress 
 
var arr3 = [1,2,3]; 
 

 
for (var item1 = 0; item1 < arr1.length; ++item1) { 
 
    for (var item2 = 0; item2 < arr2.length; ++item2) { 
 
    for (var item3 = 0; item3 < arr3.length; ++item3) { 
 
     progress(arr1.length * arr2.length * arr3.length); 
 
    } 
 
    } 
 
}

---

隨機執行時間的另一個例子（使用的承諾，做異步處理）

function progress(total) { 
 
    this.inc = (total !== 0? this.inc || 0: -1) + 1; 
 
    document.getElementById('progress').innerHTML = 'Processing ' + Math.floor(this.inc/total * 100) + '%'; 
 
} 
 

 
function processing_something(callback) { 
 
    setTimeout(function(){ 
 
    callback(); 
 
    //execution between 1 to 10 secs 
 
    }, Math.floor(Math.random() * 10) * 1000); 
 
} 
 

 
var arr1 = [1,2,3,4,5]; 
 
var arr2 = [1,2,3,4,5,6,7,8,9]; 
 

 
for (var item1 = 0; item1 < arr1.length; ++item1) { 
 
    for (var item2 = 0; item2 < arr2.length; ++item2) { 
 
     new Promise(function(resolve) { 
 
     \t //do something that require time 
 
     processing_something(resolve); 
 
     }).then(function(){ 
 
     \t progress(arr1.length * arr2.length); 
 
     }); 
 
    } 
 
}

<div id="progress"></div>