為什么在使用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);

希望這可以從概念上消除您的疑問。 :-)