修复定时器 setInterval 加速执行

2Broear

发布于 2024-03-12 10:28:51

500

发布于 2024-03-12 10:28:51

文章被收录于专栏：2B博客2B博客

定时器

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()

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