JS中setInterval()的使用以及注意事项
Posted 梅谷暴君
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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元素，需要更加小心谨慎，考虑这些元素的释放问题。
存储方案
- 放在全局变量中，用之前判断，防止重复
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])
}
}
以上是关于JS中setInterval()的使用以及注意事项的主要内容，如果未能解决你的问题，请参考以下文章
JS中setInterval()和clearInterval()的使用以及注意事项 （实用，赞）
js中clearInterval无效，以及setInterval中断后重新执行