中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

輕松解決JavaScript定時器越走越快的問題

發布時間:2020-08-28 23:32:03 來源:腳本之家 閱讀:219 作者:奶酪魔像 欄目:web開發

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

總結

以上所述是小編給大家介紹的輕松解決JavaScript定時器越走越快的問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

县级市| 武平县| 渑池县| 文登市| 繁昌县| 新营市| 昆明市| 新巴尔虎右旗| 舞钢市| 高青县| 贵港市| 达拉特旗| 民县| 延川县| 高碑店市| 姚安县| 大港区| 饶阳县| 淳化县| 武乡县| 普陀区| 育儿| 葫芦岛市| 靖安县| 沙湾县| 黄龙县| 乌恰县| 麻江县| 平舆县| 辽阳县| 娱乐| 泰安市| 双城市| 翁牛特旗| 伽师县| 南皮县| 尼勒克县| 平陆县| 阿克陶县| 郎溪县| 大悟县|