爲什麼我的間隔時間未被清除？

Question

這是我的功能，我寫這個從左到右移動我的div。在iter達到5後，間隔必須停止。但現在它繼續運行。我的間隔沒有清除，我的功能有什麼問題？

var mydiv = document.getElementById('news-variety'); 
var iter = 0; 
if (mydiv) { 
    var columns = mydiv.getElementsByTagName('DIV'); 

    function animeColumn(index, col) { 
     var timerID = window.setInterval(function() { 
      var current = window.getComputedStyle(col); 
      var matrix = new WebKitCSSMatrix(current.webkitTransform); 
      col.style.webkitTransform = matrix.translate(10, 0); 
      if (iter++ == 5) { 
       window.clearInterval(timerID); 
      } 
     }, 50); 
    } 

    for (var i = 0; i < columns.length; i++) { 
     if (columns[i].className.toLowerCase() == "column") { 
      columns[i]; 
      animeColumn(i, columns[i]); 
     } 
    } 
} 

Answer 1

firefox中存在一個奇怪的行爲（bug？），需要您將getComputedStyle的第二個參數指定爲'null'。嘗試：

var current = window.getComputedStyle(col,null); 

很可能在當前的情況下，該代碼在超時處理程序，以防止進一步的執行，從而引發「參數計數」的錯誤，不會清除超時。

或者，你可能想要做你的循環在開始你的循環的計數，因爲這樣的：

function animeColumn(index, col) { 
    var timerID = window.setInterval(function() { 
     if (iter++ == 5) { 
      window.clearInterval(timerID); 
     } 
     var current = window.getComputedStyle(col); 
     var matrix = new WebKitCSSMatrix(current.webkitTransform); 
     col.style.webkitTransform = matrix.translate(10, 0); 
    }, 50); 
} 

Answer 2

我想這是因爲你的VAR的timerId是不是在窗口的級別定義

var mydiv = document.getElementById('news-variety'); 
var iter = 0; 
var timerID; 

if (mydiv) { 
    var columns = mydiv.getElementsByTagName('DIV'); 

    function animeColumn(index, col) { 
     timerID = window.setInterval(function() { 
      var current = window.getComputedStyle(col); 
      var matrix = new WebKitCSSMatrix(current.webkitTransform); 
      col.style.webkitTransform = matrix.translate(10, 0); 
      if (iter++ == 5) { 
       window.clearInterval(timerID); 
      } 
     }, 50); 
    } 

    for (var i = 0; i < columns.length; i++) { 
     if (columns[i].className.toLowerCase() == "column") { 
      columns[i]; 
      animeColumn(i, columns[i]); 
     } 
    } 
} 

Answer 3

iter是全球性的，所以它只會在多列中的一列達到5。

嘗試將其移動到函數是這樣的：

function animeColumn(index, col) { 
    var iter = 0; 
    var timerID = window.setInterval(function() { 
     // ... 
     if (iter++ == 5) { 
      window.clearInterval(timerID); 
     } 
    }, 50); 
} 

Answer 4

我創建了一個搗鼓這個http://jsfiddle.net/DXSNp/