在双（嵌套）循环中设置延迟（超时）

Question

完全卡住了。

我已经看到了这种流行的解决方案，可以在循环的迭代之间添加延迟（/sf/answers/250861831/），但是它似乎仅适用于单个循环（即不嵌套）。

这是伪代码，

for (var i = 0; i < max; i++){
    for (var j = 0; j < max; j++){  
        pause(1000);         // ideally would just elegantly pause all execution
    }
}

我正在尝试使用setTimeout（除非存在其他选项！），但是我似乎无法全神贯注于如何设置它。

---

上下文 -它应停顿足够长的时间以使动画发生。（根据i和j的值，会发生不同的动画）。

Answer 1

如前所述，您无法真正暂停javascript中的执行。尽管技巧可能是将指令收集在一个延迟队列中，该队列自身执行fifo。例如：

// helper function
var delayed = (function() {
  var queue = [];

  function processQueue() {
    if (queue.length > 0) {
      setTimeout(function () {
        queue.shift().cb();
        processQueue();
      }, queue[0].delay);
    }
  }

  return function delayed(delay, cb) {
    queue.push({ delay: delay, cb: cb });

    if (queue.length === 1) {
      processQueue();
    }
  };
}());

您的示例，重写：

var i = 0, j, max = 3;

for (; i < max; i += 1) {
  for (j = 0; j < max; j += 1) {
    // add function to the queue, shadowing i/j with an IIFE:
    delayed(1000, function(i, j) {
      return function() {
        console.log(i, j);
      };
    }(i, j));
  }
}

演示：http : //jsbin.com/kadepage/1/