setTimeout与setInterval的坑以及优缺点

转自：setTimeout与setInterval的坑以及优缺点 - 找寻的千寻 - 博客园

setInterval和setTimeout的缺陷和优势分析_F-ZERO-F的博客-CSDN博客_settimeout缺点

说到setTimeout与setInrerval大家可能都觉得很easy，我刚接触js的也是这样的想法，可后来在知乎看到了一道题，大概好像是这样的：

例一：

setTimeout(function(){

console.log("小马“);

setTimeout(function(){arguments.callee;},1000);

},1000)

例二：

setInterval(function(){console.log("小马“);},1000);

问一与二的区别？

说实话我刚看到这个题目的时候是懵比的，因为我觉得这两者是完全一样的呀，都是间隔1000ms之后执行回调的呀，可是既然这么问了肯定他们之间是有区别的，于是乎我就去查了相关的资料，果然，二者不仅仅是有差别的，而且定时器也颠覆了我以往的认知。

首先，这两个定时器的基本含义我就不重复了，我觉得只要是个学前端的肯定没有不知道的。为什么说定时器也颠覆了我以往的认知呢？因为我发现定时器的回调函数并不是相当于在时间到了就执行，而是有一个主js执行进程，这个进程是页面刚加载的时候页面按照加载顺序执行的js代码，此外还有一个需要在进程空闲的时候执行的代码队列，而我们所说的定时器的回调就是相当于（以上的例一为例）在1000ms之后把定时器回调放入到空闲队列中（注意，空闲队列有可能还有其它的代码，比如点击事件，因此定时器回调放入的位置不一定是空闲队列的开始位置！）举个例子：

 var i=0;

function a(){

t=setTimeout(function(){console.log("小明")},0);

}

a();

alert(”小红“);

 此时你会发现先弹出小红，又弹出的小明！！

好了，简单的可以理解位定时器和js其他程序是并行执行的，不过jquery的作者有一篇文章专门介绍这个队列的，有兴趣的可以搜一下看看！！

接下来说第二点，就是例一与例二的区别：

setInterval有个很烦的地方就是当js主程序空闲时候，执行代码队列里面的代码的时候，如果此时候我们有一个问题，定时器是等到回调执行完，才开始计时进行下次循环呢？还是只要一次计时完毕，插入回调之后不管回调执不执行就开始计时呢？答案显然是后者，这也就是我说setInterval坑比的原因啊，因为这会出现一种情况，当我们插入回调的时候前队列有别的代码在执行，这时候回调肯定是不会执行的，因此如果这个时候无限定时时间到了会再次插入回调，这个时候如果发现队列中的第一次回调没有执行，那么再次插入的回调浏览器就默认取消，（这是以防出现回调连续执行多次的情况）但是这又引发了新的情况就是有些回调是不能取消掉的？

这就是我们经常使用例一代替例二的原因，例一可以避免上述的情况。

一、弊端
1.setInterval对自己调用的代码是否报错漠不关心。即使调用的代码报错了，它依然会持续的调用下去
2.setInterval无视网络延迟。在使用ajax轮询服务器是否有新数据时，必定会有一些人会使用setInterval，然而无论网络状况如何，它都会去一遍又一遍的发送请求，如果网络状况不良，一个请求发出，还没有返回结果，它会坚持不懈的继续发送请求，最后导致的结果就是请求堆积。
3.setInterval并不定时。如果它调用的代码执行的时间小于定时的时间，它会跳过调用，这就导致无法按照你需要的执行次数或无法得到你想要的结果。

二、解决方案
使用setTimeout代替setInterval。
可以给setTimeout设置时间后，在最后调用自身。如果希望“匀速”触发。可以计算代码执行时间，用希望的延迟减去上次执行的时间。

注：有一种想法是将setInterval的延迟时间设置的长于上述的几种时间，来达到绝对的均速调用。但事实上，js的计时器因为自身机制的原因，存在4ms–15ms的误差。