今天看书时看到说,在生产环境中一般都用 setTimeout 来代替 setInterval,但其原因并没有解释的太清楚,在网上搜了半天,也没有得到满意的答案,于是自己动手测试了一番,现在在这里留个笔记。
先放上结论
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 即可完美的达到循环执行的目的。