JS中setInterval()的使用以及注意事項


定義和用法

setInterval() 方法可按照指定的周期(以毫秒計)來調用函數或計算表達式。

setInterval() 方法會不停地調用函數,直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
用法如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<p>顯示當前時間:</p>
<p id="demo"></p>

<button onclick="myStopFunction()">停止時間</button>

<script>
var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
    clearInterval(myVar);
}
</script>

</body>
</html>

注意事項

在動態加載的頁面中,一定要清理循環定時器。有時候重復設置定時器,嚴重的時候會導致內存泄露,最終頁面崩潰。

回調

回調函數中會包含一些變量或者DOM元素,需要更加小心謹慎,考慮這些元素的釋放問題。

存儲方案

  1. 放在全局變量中,用之前判斷,防止重復
var interval = null;//計時器
var i = 0;
function start(){//啟動計時器函數
    if(interval!=null){//判斷計時器是否為空
        clearInterval(interval);
        interval=null;
    }
    interval = setInterval(overs,1000);//啟動計時器,調用overs函數,
}
function overs(){
    i++;
    console.log(i); 
}
    
function stop(){        
    clearInterval(interval);
    interval = null;
}
  1. 暫存JQUERY變量中
//這是基於BJUI的框架代碼,這個還有其他上下文,不要輕易模仿
$.CurrentNavtab[0].TimerInfo=[];
//存儲
$.CurrentNavtab[0].TimerInfo.push(setInterval(overs,1000));
//釋放
if (typeof($thisNavtab[0].TimerInfo) != "undefined"){
    for (var i=0;i<$thisNavtab[0].TimerInfo.length;i++){
        clearInterval($thisNavtab[0].TimerInfo[i])
    }
}


免責聲明!

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



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