修复定时器 setInterval 加速执行

文章摘要moonshot-v1-8k

该文章介绍了JavaScript中的定时器，主要聊了setInterval定时器在使用过程中可能存在的问题，并给出了错误和正确使用的代码示例。作者提醒读者在使用setInterval定时器时注意变量作用域，并建议将定时器名称预设为全局变量用于清除和执行后清除。

定时器

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

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

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