zoukankan      html  css  js  c++  java
  • 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])
        }
    }
    
  • 相关阅读:
    html单引号,双引号转义
    把文章里边的html标签去掉(去掉文字的样式,显示css设置的样式)
    java缓存适合使用的情况
    Java内存缓存
    springmvc怎么重定向,从一个controller跳到另一个controller
    jquery 获取标签名(tagName)
    jQuery判断checkbox是否选中的3种方法
    判断一组checkbox中是否有被选中的
    在O(N)时间内求解 正数数组中 两个数相加的 最大值
    两种方法求解 正数数组中 两个数相减 的最大值
  • 原文地址:https://www.cnblogs.com/meiguhuaxian/p/13026872.html
Copyright © 2011-2022 走看看