Javascript - clearInterval多個setInterval時不工作

我得到了setInterval & clearInterval一些問題。
在我的代碼中，我設置了多個時間間隔，當count減少到0時，停止執行。Javascript - clearInterval多個setInterval時不工作

象下面這樣：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0" charset="utf-8"> 
    </head> 
    <body> 
    <body> 
     <script type="text/javascript"> 
      for (var i=0; i<4; i++){ 
       var count = 100; 

       var IntervalID = window.setInterval((function(){ // closure 
        var timeoutID = IntervalID; // temp 
        var countTemp = count; // temp 
        var id = i; 

        return function(){ 
         countTemp --; 
         console.log(id + " " + countTemp); 

         // do something here 

         if (countTemp == 0){         
          clearInterval(timeoutID); // stop the execution 
          console.log(id + " stop"); 
         } 
        } 
       })(), 20); 
      } 
     </script> 
    </body> 
</html>

控制檯後出現停止消息「X站」，除了最後一個元素（ID：3）的所有元素停止，它仍在繼續。

我試着寫我的代碼的另一種形式：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0" charset="utf-8"> 
    </head> 
    <body> 
     <script type="text/javascript"> 
      for (var i=0; i<4; i++){ 
       doSomething(i); 
      } 

      function doSomething(id){ 
       var count = 100; 

       var IntervalID = window.setInterval((function(){ // closure 
        var timeoutID = IntervalID; // temp 
        var countTemp = count; // temp 

        return function(){ 
         countTemp --; 
         console.log(id + " " + countTemp); 

         // do something here 

         if (countTemp == 0){         
          clearInterval(timeoutID); // stop the execution 
          console.log(id + " stop"); 
         } 
        } 
       })(), 20); 
      } 
     </script> 
    </body> 
</html>

但是這一次，所有的元素都不會停止。

我有兩個問題：
1.這兩個代碼有什麼區別？
2.如何使代碼工作正常？

編輯：
如果你只是想使代碼的工作，只改變在第二片斷一行：

clearInterval(timeoutID); // stop the execution

到

clearInterval(IntervalID); // stop the execution

但其他人的回答能解決我在這個問題上混淆了什麼。

來源

2016-11-04 CryMasK

什麼是IntervalID-S處的值你嘗試使用它的時間？ Console.log表示一個出來，正好在var timeoutID = IntervalID下面; – Mati

在第一個片段中，由於對setInterval的調用尚未完成，所以'timeoutID'未定義爲'i == 0'。因此，添加'console.log（i +「 - 」+ IntervalID）;'立即在'var timeoutID = IntervalID之上; // temp'會告訴你'0 - undefined'，然後是'1 - 1'，'2 - 2'，'3 - 3' – enhzflep

哦，我明白了一些部分，在第一個片段中，當'countTemp'減少到0，'clearInterval（timeoutID）;'實際停止前一個（在'id == 1'節中，它停止'id == 0'執行;'id == 2'停止'id == 1';等等沒有人停止'id == 3'，所以它仍然會）。 – CryMasK

的問題是正確的IntervalID沒有被捕獲在你關閉，你封閉運行的時間，window.setInterval沒有返回賦值表達式尚未結束的ID。

一個簡單的特技可以與物體一起使用，因爲它們是在JavaScript

傳遞給函數通過引用我已經修改了循環來完成此

for (var i=0; i < 4; i++){ 

    var count = 100; 

    var args = { id: i, counter: count }; 
    var IntervalID = window.setInterval((function(args){ // closure 

     return function(){ 
      args.counter--; 
      console.log(args.id + " " + args.counter) 
      if (args.counter == 0){         
       clearInterval(args.IntervalID); // stop the execution 
       console.log(args.id + " stop"); 
      } 
     }.bind(args); 
    })(args), 20); 

    // by now the correct IntervalID will be captured 
    // as the assignment expression has finished executing 
    args.IntervalID = IntervalID; 
}

來源

2016-11-04 17:16:25

謝謝，現在我明白了。回答我自己的問題1，在第一個片段中，'timeoutID'捕獲之前保留在內存中的'IntervalID'，所以只有最後一個不能停止。在第二個代碼片段中，調用一個函數並在函數完成後從函數棧彈出，所以'timeoutID'不能捕獲任何值，它是'undefined'，所有元素/ intervalIs都不能停止。 – CryMasK

Javascript - clearInterval多個setInterval時不工作

回答

相關問題