Set a delay (timeout) inside a double (nested) loop

Question

Completely stuck.

I have seen this popular solution for adding delays between iterations of a loop (https://stackoverflow.com/a/3583740), but it only seems to work for a single loop (i.e not nested).

This is the pseudo code,

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

I am trying to use setTimeout (unless other options exist!) but I can't seem to wrap my head around how to set it up.

Context - It should pause long enough for an animation to occur. (A different animation occurs depending on the values of i and j ).

`setTimeout(function(){ ... }, 2000);` This will run the function after `2` seconds, so do whatever you want to do in this function. There is another `setInterval(fn, interval)` to something recursively. — The Alpha, Apr 02 '14 at 15:15
@SheikhHeera In the link shared in the question, it shows one way to put delays in a loop. My problem is putting the delay inside a nested loop. The solution in the link seems to only work for single loops — Jet Blue, Apr 02 '14 at 15:16
Post more information, what you are up to, so can make an answer. — The Alpha, Apr 02 '14 at 15:17
Do you really need a nested loop? Why not increase your max and adjust your animations to accommodate using only one loop. — Matt K, Apr 02 '14 at 15:26
I think the animation part is misleading. It's not really the animation...it's a general question of how to simulate a pause within a nested loop (as the [link](http://stackoverflow.com/a/3583740) above manages to do for a single loop) — Jet Blue, Apr 02 '14 at 15:38

score 6 · Accepted Answer · answered Apr 03 '14 at 10:16

As it has been said, you can't really pause execution in javascript. Though a trick could be to collect the instructions in a delayed queue which executes itself 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();
    }
  };
}());

your example, rewritten:

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

demo: http://jsbin.com/kadepage/1/

Thanks! Not too sure what your code is doing (still a noob) but it works! — Jet Blue, Apr 04 '14 at 21:36

score 0 · Answer 2 · answered Oct 14 '15 at 02:43

This will work as nested for loop with delay.

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

Set a delay (timeout) inside a double (nested) loop

2 Answers2