使用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;原始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);

希望这在概念上清除你的怀疑。 ： - ）