带有嵌套 For 循环的进度条

Question

循环遍历两个不同的数组，两个 for 循环异步嵌套在彼此中（作为块和 setTimeout sourced from here), and trying to use the progress bar example from W3Schools here（标签一）。

来源（针对 'done' 回调略作修改）异步函数：

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();
}

不管是否异步，即使使用普通的 for 循环，这些问题也是相同的：

W3School 示例使用的是 setInterval，这是不准确的，因为 for 循环可能在 setInterval 之前就已完成处理。
有两个嵌套的for循环，所以不是跟踪for (var i=0...)中（例如）i的进度，它需要跟踪第一个循环*第二个循环的准确性（为了不出现停止 - 特别是因为第二个循环的数组长度可能比第一个更大）。

例如：

异步使用上面的链接示例：

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 循环操作。

这些问题应该如何解决，最好不用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);
    }
  }
}

另一个随机执行时间的例子（使用 promise 进行异步处理）

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) {
       //do something that require time
        processing_something(resolve);
      }).then(function(){
        progress(arr1.length * arr2.length);
      });
  }
}

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

带有嵌套 For 循环的进度条

Progress Bar with Nested For-loops

javascript

loops

asynchronous

for-loop

progress-bar