为什么在使用window.setInterval（）之后window.setTimeout（）变成循环调用

Question

I want to count from 5 to 1 so I write code in Chrome console like this :

var a = 5;
window.setInterval (function() {
    if(a > 0)
      console.log(a--);
}, 1000);
window.clearInterval();

The console shows this result:

5
4
3
2
1

And then I run another piece of code after it:

var a = 5;
window.setTimeout (function() {
    if(a > 0)
      console.log(a--);
}, 1000);

And I find the console shows this result:

5
4
3
2
1

Why setTimeout() becomes a loop ? It was supposed to print a single 5 !!!

Here is the console :

Answer 1

window.clearInterval() doesn't do anything by itself, and redeclaring a variable with var will just assign to the original variable, so when you set var a = 5; the original setInterval callback continues to run.

Pass clearInterval the return value of setInterval instead:

var a = 5;
var timer = setInterval(function() {
    if (a > 0)
      console.log(a--);
}, 1000);

// after output has been produced
clearInterval(timer);

If you want clearInterval to happen automatically once a hits 0 , put it inside the callback:

var a = 5;
var timer = setInterval(function() {
    if (a > 0)
        console.log(a--);
    else
        clearInterval(timer);
}, 1000);

Answer 2

You are wrongly anticipating that setTimeout has become a loop.

This is what happens. First you run the following code

var a = 5;
window.setInterval (function() {
    if(a > 0)
      console.log(a--);
}, 1000);
window.clearInterval();

In above code the callback function will be called every second and if value of a is greater than 0 it will decrement it by 1. Note that window.clearInterval() line of code has no effect here so the callback function will keep on running but just stop printing to console because condition will not fall true when value of a is less than 0 or equal to 0

The callback is still running, just not printing to console

Now you run the following code

var a = 5;
window.setTimeout (function() {
    if(a > 0)
      console.log(a--);
}, 1000);

This will first set the value of a to 5

This is where the cavet is.

Since you again set the value of a to 5 the setInterval callback is still being executed every second. So now the condition will evaluate to true and hence it prints to console.

What prints to console and you think of it as it being printed by setTimeout is actually being printed by setInteval

If you run the following code you will see what is acutally happeing

var a = 5;
var timer = setInterval (function() {
    if(a > 0)
      console.log('From setInterval : ',a--);
    console.log('SetInterval is still running');
}, 1000);

var a = 5;
window.setTimeout (function() {
    if(a > 0)
      console.log(a--);
}, 1000);

Hope this clears your doubt conceptually. :-)