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

Question

我想从5数到1，所以我在Chrome控制台中这样编写代码：

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

控制台显示以下结果：

5
4
3
2
1

然后在它之后运行另一段代码：

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

我发现控制台显示了以下结果：

5
4
3
2
1

为什么setTimeout()成为循环？ 它应该只打印一个5 ！

这是控制台：

Answer 1

window.clearInterval()本身不会执行任何操作，并且使用var重新声明变量只会将其分配给原始变量，因此当您将var a = 5;设置var a = 5; 原始的setInterval回调将继续运行。

传递clearInterval代替setInterval的返回值：

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

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

如果你想clearInterval一次自动发生a命中0 ，把它回调里面：

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

Answer 2

您错误地预料到setTimeout已成为循环。

这就是发生的情况。 首先，您运行以下代码

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

在上面的代码中，回调函数将每秒调用一次，如果a的值大于0，则会将其递减1。请注意， window.clearInterval()代码行在此处无效，因此回调函数将继续运行，但只是停止打印到控制台，因为当a的值小于0或等于0时条件将不成立

回调仍在运行，只是没有打印到控制台

现在，您运行以下代码

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

这将第一值设置a至5

这是洞穴的所在。

由于您再次将a的值设置为5，因此setInterval回调仍在每秒执行一次。 因此，现在条件将评估为true ，因此将其打印到控制台。

通过setTimeout打印到控制台的内容以及您想到的内容实际上是由setInteval打印的

如果您运行以下代码，您将看到异常的快乐

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

希望这可以从概念上消除您的疑问。 :-)