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 。 E.g：

// 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/

Answer 2

这将作为嵌套for循环使用延迟。

    var i = o = 0;
    var max = 10;
    var delay = 1000;
    function rec()
    {   
        console.log("outerloop"+o);
        var inner = setInterval(function(){

            console.log("innerloop"+i);
            console.log(new Date());
            i++;
            if(i==max)
            {
                clearTimeout(inner);
                var outer = setTimeout(function(){
                    o++;
                    i=0;
                    if(o==max)
                    {   
                        return;

                    }
                    clearTimeout(outer);
                    rec();
                },delay);
            }
        },delay);
    }
    rec();

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

2 个答案: