JavaScript定時器越走越快的問題 [TOC] 之前在項目中寫了定時器來做迴圈播放，但是總是會有越走越快的問題，開始是以為前後的HTML代碼拼接的有問題，時間緊急的情況下反覆改了很多也沒什麼效果，後來發現是js定時器的問題，在這裡記錄一下。 （setinterval）多次初始化 使用js定時器 ...
目錄
JavaScript定時器越走越快的問題
之前在項目中寫了定時器來做迴圈播放，但是總是會有越走越快的問題，開始是以為前後的HTML代碼拼接的有問題，時間緊急的情況下反覆改了很多也沒什麼效果，後來發現是js定時器的問題，在這裡記錄一下。
（setinterval）多次初始化
使用js定時器（setinterval）首要的問題就是要記得清除，即調用（clearInterval）方法，由於沒有使用定時器的經驗，我一開始是沒有清除定時器，程式每一次初始化的時候都調用一次定時器，之前的定時器實例沒有被銷毀，新的定時器又開始執行，就會出現1s變0.5s，0.5s變0.25秒的情況，從觀感上來看就是定時器“越走越快”了。
這個過程可以用幾行簡單的代碼模擬一下
<label id="lblShowNum"></label>
<input type="button" id="btnStart" value="啟動" />
<input type="button" id="btnClear" value="清除" />window.onload = function () {
var i = 0;
var timer;
document.getElementById("btnStart").onclick = function () {
timer = setInterval(
function () {
i++;
document.getElementById("lblShowNum").innerText = i;
}, 1000);
}
document.getElementById("btnClear").onclick = function () {
clearInterval(timer);
}
}如果只點擊一次“啟動”按鈕，定時器會正常運行，點擊“清除”按鈕就可以暫停定時器，但是每一次點擊“啟動”按鈕，都會提高數字的增速，而清除功能也不再起作用，這就是因為在每一次點擊“啟動”的時候都有新的定時器被創建。
清除（clearInterval）的失效
但為什麼清除的方法會失效呢？在代碼中我們定義了一個變數timer去接收定時器，對timer操作是不是就能清除定時器了呢？並不是是這樣，首先看下setinterval()返回值的說明
一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執行的值。
這裡可以看出這個返回值並不是定時器本身，它只是一個用於傳遞的返回值，如果想當然的把它當做定時器，以為每次初始化賦值就是新的定時器就錯了，我最開始就是這樣想的。
每一次給timer賦值都是在創建新的定時器對象，而且之前的定時器也並沒有被清除，所以這時候調用clearInterval(timer)清除的只是最後一個被創建的定時器對象罷了。
使用上面的例子就可以簡單的用肉眼觀察效果，先點擊一次啟動觀察速度，再點擊第二次，會看到速度有明顯的提升，這時候使用清除功能，速度就會回到第一次啟動的狀態，但是多次點擊清除是沒有用的，如果想看準確的結果可以將時間列印出來進行比較。
解決方法
看到這裡，答案呼之欲出了，很簡單，在每次初始化定時器之前先執行清除操作，保證之前的定時器被清除了就不會發生越走越快的情況，所以其實並不是定時器越走越快，而是有多個定時器在執行，定時器裡面的程式執行的頻率提高了。
window.onload = function () {
var i = 0;
var timer;
document.getElementById("btnStart").onclick = function () {
clearInterval(timer);
timer = setInterval(
function () {
i++;
document.getElementById("lblShowNum").innerText = i;
}, 1000);
}
document.getElementById("btnClear").onclick = function () {
clearInterval(timer);
}
}
