Why is setInterval logging all data at once instead of waiting for specified interval each time?

Question

I want to print some numbers using a for loop at an interval of two seconds each. The outer loop is needed in all these snippets because I need it for some other manipulation, so please don't say that there is no need for two loops.

The following code snippet waits for about 2 seconds and then prints 61 fifty times at once.

for(var i=0;i<1;i++) { 
    for(var j=1;j<51;j++) {
        window.setInterval(function(){
            console.log(10*i + j);
        }, 2000);
    }  
}

I thought it will print 1 -- wait 2 seconds -- print 2 -- wait 2 seconds -- and so on. I thought that I am asking the browser to stop for two seconds after each iteration of the inner loop and then print the numbers. Also, I thought that the printing would stop after one iteration of the outer loop but it does not and the console keeps printing 61. One more thing, why is it printing 61?

Edit: After comments from zerkms, I now have the following code:

for(var i=0;i<1;i++) { 
    for(var j=1;j<51;j++) {
        window.setTimeout(function(){
            console.log(10*i + j);
        }, 2000*j);
    }  
}

It prints out 50 lines at an interval of 2 seconds but it keeps printing 61 every single time. How can I print all the numbers?

Answer 1

I thought that I am asking the browser to stop for two seconds after each iteration of the inner loop and then print the numbers.

You're simply misunderstanding the nature of setInterval. When you call setInterval, you are saying:

Browser, I am going to give you a function, and I want you to run that function every two seconds until I tell you to stop.

One right way to do what you're hoping to do is this:

var i = 0;
var j = 1;
var interval = window.setInterval(function(){
    console.log(i, j);
    j++;
    if(j > 50) {
        j = 0;
        i++;
        if(i > 4) {
            window.clearInterval(interval);
        }
    }
}, 2000);

You'll notice you don't need any loops because setInterval is already going to repeat your function for you. Without the loop, you need to move your incrementing logic (i = 0, i++, etc.) into normal statements. Then, once you want to stop, you have to tell the browser to stop via clearInterval.

This is hard to follow, though, so depending on what you're actually trying to accomplish it's likely that there's a better way. For example, if you're trying to iterate across a couple of arrays, cross-join fashion, you could flatten your arrays out first, removing the need for one of your iterators. Or you could use a library like RxJS to zip the values you want with an interval timer.

var everyTwoSeconds = Rx.Observable.interval(2000);
var firstSetOfThings = Rx.Observable.from(['one', 'two', 'three']);
var secondSetOfThings = Rx.Observable.range(1, 50);
var allTheThings = firstSetOfThings.flatMap(secondSetOfThings, function(x, y) {
    return "first: " + x + ", second: " + y;
});
everyTwoSeconds.zip(allTheThings, function(i, thing) { console.log(thing); });