码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-06-01 20:40:05      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:java   let   内存泄露   click   pre   timer   jquery   inter   char   

定义和用法

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])
    }
}

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

标签:java   let   内存泄露   click   pre   timer   jquery   inter   char   

原文地址:https://www.cnblogs.com/meiguhuaxian/p/13026872.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!