javascript setinterval 11/17/2020
最近更新于:

定时器

JS 中有 setTimeout setInterval 两种常见的定时器, setTimeout 只执行一次, setInterval 会在规定的条件内反复执行以实现不同需求。这次聊的算是老生常谈的问题了,很久以前就知道 setInterval 存在这个问题,当时也各种 stackoverflow 不过具体忘记咋处理的了。现在又突然遇到 setInterval 反复执行越来越快这种情况,顺便记录下。

JavaScript 定时器

setInterval

模拟一个错误使用 setinterval 场景

var timer,  //预设定时器为全局变量
    setup=function(){
        timer=setInterval(function(){
            console.log('repeat this interval 3000/pms.')
        }, 3000)
    },
    clear=function(){
        clearInterval(timer)
    };
setup();  //连续执行多次 setup() 触发定时器加速
clear();  //此时再执行 clear() 无效

正确使用 setinterval

var timer,  //预设定时器为全局变量
    setup=function(){
        timer=setInterval(function(){
            console.log('repeat this interval 3000/pms.');
            //clearInterval(timer)  //定时器执行完后内部销毁
        }, 3000)
    },
    clear=function(){
        clearInterval(timer)
    },
    run=function(){
        clear();  //如果设定过定时器则先清除
        setup();  //再执行定时器设定
    };
run()  //每次 setup() 前都执行一次 clear()

没错就这么简单,我估计之前没搞对的地方主要是变量作用域这块没弄清楚。

小记

  • 将定时器名称预设到全局变量,用于执行前清除和执行后清除
  • 使用 setInterval 前先清理一遍已设定的 Interval

以上,有问题在评论区反馈。