解決JavaScript定時(shí)器越走越快的問(wèn)題

之前在項(xiàng)目中寫(xiě)了定時(shí)器來(lái)做循環(huán)播放，但是總是會(huì)有越走越快的問(wèn)題，開(kāi)始是以為前后的HTML代碼拼接的有問(wèn)題，時(shí)間緊急的情況下反復(fù)改了很多也沒(méi)什么效果，后來(lái)發(fā)現(xiàn)是js定時(shí)器的問(wèn)題，在這里記錄一下。

（setinterval）多次初始化

使用js定時(shí)器（setinterval）首要的問(wèn)題就是要記得清除，即調(diào)用（clearInterval）方法，由于沒(méi)有使用定時(shí)器的經(jīng)驗(yàn)，我一開(kāi)始是沒(méi)有清除定時(shí)器，程序每一次初始化的時(shí)候都調(diào)用一次定時(shí)器，之前的定時(shí)器實(shí)例沒(méi)有被銷(xiāo)毀，新的定時(shí)器又開(kāi)始執(zhí)行，就會(huì)出現(xiàn)1s變0.5s，0.5s變0.25秒的情況，從觀感上來(lái)看就是定時(shí)器“越走越快”了。

這個(gè)過(guò)程可以用幾行簡(jiǎn)單的代碼模擬一下

<label id="lblShowNum"></label>
<input type="button" id="btnStart" value="啟動(dòng)" />
<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);
  }
}

如果只點(diǎn)擊一次“啟動(dòng)”按鈕，定時(shí)器會(huì)正常運(yùn)行，點(diǎn)擊“清除”按鈕就可以暫停定時(shí)器，但是每一次點(diǎn)擊“啟動(dòng)”按鈕，都會(huì)提高數(shù)字的增速，而清除功能也不再起作用，這就是因?yàn)樵诿恳淮吸c(diǎn)擊“啟動(dòng)”的時(shí)候都有新的定時(shí)器被創(chuàng)建。

清除（clearInterval）的失效

但為什么清除的方法會(huì)失效呢？在代碼中我們定義了一個(gè)變量timer去接收定時(shí)器，對(duì)timer操作是不是就能清除定時(shí)器了呢？并不是是這樣，首先看下setinterval()返回值的說(shuō)明

一個(gè)可以傳遞給 Window.clearInterval() 從而取消對(duì) code 的周期性執(zhí)行的值。

這里可以看出這個(gè)返回值并不是定時(shí)器本身，它只是一個(gè)用于傳遞的返回值，如果想當(dāng)然的把它當(dāng)做定時(shí)器，以為每次初始化賦值就是新的定時(shí)器就錯(cuò)了，我最開(kāi)始就是這樣想的。

每一次給timer賦值都是在創(chuàng)建新的定時(shí)器對(duì)象，而且之前的定時(shí)器也并沒(méi)有被清除，所以這時(shí)候調(diào)用clearInterval(timer)清除的只是最后一個(gè)被創(chuàng)建的定時(shí)器對(duì)象罷了。

使用上面的例子就可以簡(jiǎn)單的用肉眼觀察效果，先點(diǎn)擊一次啟動(dòng)觀察速度，再點(diǎn)擊第二次，會(huì)看到速度有明顯的提升，這時(shí)候使用清除功能，速度就會(huì)回到第一次啟動(dòng)的狀態(tài)，但是多次點(diǎn)擊清除是沒(méi)有用的，如果想看準(zhǔn)確的結(jié)果可以將時(shí)間打印出來(lái)進(jìn)行比較。

解決方法

看到這里，答案呼之欲出了，很簡(jiǎn)單，在每次初始化定時(shí)器之前先執(zhí)行清除操作，保證之前的定時(shí)器被清除了就不會(huì)發(fā)生越走越快的情況，所以其實(shí)并不是定時(shí)器越走越快，而是有多個(gè)定時(shí)器在執(zhí)行，定時(shí)器里面的程序執(zhí)行的頻率提高了。

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);
  }
}

總結(jié)

以上所述是小編給大家介紹的輕松解決JavaScript定時(shí)器越走越快的問(wèn)題,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論