JS中不要使用setInterval的原因分析

今天看书时看到说,在生产环境中一般都用 setTimeout 来代替 setInterval,但其原因并没有解释的太清楚,在网上搜了半天,也没有得到满意的答案,于是自己动手测试了一番,现在在这里留个笔记。QQ图片20151029195121_2345看图王(1)


 

先放上结论

setInterval (“alert(‘1’)”, 2000)

这个 setInterval 里面的 2000,并不是第一个 alert 结束到第二个 alert 开始之间间隔 2s,而是两个 alert 开始的时间间隔 2s。不过往往我们需要的是前者,也把这个函数的实现方法错误的理解成了前者。

所以,没有其他代码运行的情况下,setInterval 会使得代码两次执行的间隔时间总是小于设定的时间,极限情况下,间隔时间会变成 0

setTimeout 可以完美实现 setInterval 的功能,并且更加灵活,比如第一次延迟 1s,第二次延迟 2s 之类的,缺点就是代码量更大了。

·

测试代码

请按 F12,然后执行:

1
2
3
4
5
6
7
8
setInterval(function(){
    console.log("start...");
    var d0=Date.now();
    while(true)
        if(Date.now()-d0>4000)
            break;
    console.log("end!");
},2000);

这段代码在函数开始时输出 start,结束时输出 end,我们要让他间隔 2s 运行一次,但是它的执行耗费时间是 4s。

结果发现,这个函数将会连续运行,中间没有间隔。

所以

我们要求间隔 m 秒,函数运行需要 n 秒,使用 setInterval 实际间隔 m-n 秒。这显然和我们大多数时候的目的不符合,我们需要的是不管函数运行耗时,间隔时间总是 m 秒。

所以使用 setTimeOut,每次函数结束时对自己再使用一次 setTimeOut 即可完美的达到循环执行的目的。

0 条评论
发表一条评论