JS中定時器的返回數值ID值


定時器會返回一個數字值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。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM