定時器會返回一個數字值id,可以由clearInterval(id)或clearTimeout(id)來實現對對應定時器的清除。
setInterval()/setTimeout()BOM中的Window對象方法,以返回數字值id來清除定時器的排序位置存在一定的兼容性問題。通常采用一個變量接受定時器產生的返回值id,通過變量來這種方式來實現關閉定時器操作的兼容性。
chorme瀏覽器測試:
var i = 0; var timer = setInterval(function () { console.log(i + 'i'); i++; }, 1000) console.log(timer);//=>1,firefox瀏覽器可能顯示為2,這是BOM中的兼容性問題 console.log(typeof timer);//=>'number'
直接采用定時器返回的數值ID關閉定時器的代碼:(chrome[版本 73.0.3683.103(正式版本)(64 位)]測試有效)
var j=0; var a = setInterval(function () { console.log(j + 'j'); j++; }, 1000); clearInterval(1);
一般避免BOM中定時器返回數值ID直接使用,以免產生兼容性問題。避免這種兼容性使用定時器的案例:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>cnblog頭部輪播圖</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <style> </style> <script> </script> </head> <body> <input type='button' value='點擊開啟定時器' id='btn' /> <input type='button' value='點擊關閉定時器' id='btn-close' /> <p id='content'></p> <script> var i = 0; var oBtn = document.getElementById('btn'); var oBtnC = document.getElementById('btn-close'); var oP = document.getElementById('content'); var timer = null; oBtn.onclick = function () { if(timer){ clearInterval(timer); } timer=setInterval(function () { oP.innerHTML += i + '<br/>'; i++; }, 1000); } oBtnC.onclick = function (){ clearInterval(timer); } </script> </body> </html>
測試時,以下版本瀏覽器的定時器返回數值ID以1為起始,一次后排。
Chrome[版本 73.0.3683.103(正式版本)(64 位)]
UC[版本6.2.4098.3]
Edge[Microsoft Edge 44.17763.1.0]測試。
但是兼容性問題瀏覽器:
fireFox[版本67.0.3 (32 位)]要在原定時器的序位的基礎上加1。