javascript - 在双(嵌套)循环内设置延迟(超时)

Question

完全卡住了。

我见过这种在循环迭代之间添加延迟的流行解决方案 ( https://stackoverflow.com/a/3583740 )，但它似乎只适用于单个循环(即未嵌套)。

这是伪代码，

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/