定義和用法
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元素,需要更加小心謹慎,考慮這些元素的釋放問題。
存儲方案
- 放在全局變量中,用之前判斷,防止重復
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;
}
- 暫存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])
}
}