setTimeout与setInterval的坑以及优缺点

说到setTimeout与setInrerval你们可能都以为很easy,我刚接触js的也是这样的想法,可后来在知乎看到了一道题,大概好像是这样的:前端

例一:jquery

setTimeout(function(){浏览器

console.log("小马“);函数

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

},1000)队列

例二:进程

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

问一与二的区别?回调函数

说实话我刚看到这个题目的时候是懵比的,由于我以为这二者是彻底同样的呀,都是间隔1000ms以后执行回调的呀,但是既然这么问了确定他们之间是有区别的,因而乎我就去查了相关的资料,果真,两者不只仅是有差异的,并且定时器也颠覆了我以往的认知。io

首先,这两个定时器的基本含义我就不重复了,我以为只要是个学前端的确定没有不知道的。为何说定时器也颠覆了我以往的认知呢?由于我发现定时器的回调函数并非至关于在时间到了就执行,而是有一个主js执行进程,这个进程是页面刚加载的时候页面按照加载顺序执行的js代码,此外还有一个须要在进程空闲的时候执行的代码队列,而咱们所说的定时器的回调就是至关于(以上的例一为例)在1000ms以后把定时器回调放入到空闲队列中(注意,空闲队列有可能还有其它的代码,好比点击事件,所以定时器回调放入的位置不必定是空闲队列的开始位置!)举个例子:

 var i=0;

function a(){

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

}

a();

alert(”小红“);

 此时你会发现先弹出小红,又弹出的小明!!

好了,简单的能够理解位定时器和js其余程序是并行执行的,不过jquery的做者有一篇文章专门介绍这个队列的,有兴趣的能够搜一下看看!!

接下来讲第二点,就是例一与例二的区别:

setInterval有个很烦的地方就是当js主程序空闲时候,执行代码队列里面的代码的时候,若是此时候咱们有一个问题,定时器是等到回调执行完,才开始计时进行下次循环呢?仍是只要一次计时完毕,插入回调以后无论回调执不执行就开始计时呢?答案显然是后者,这也就是我说setInterval坑比的缘由啊,由于这会出现一种状况,当咱们插入回调的时候前队列有别的代码在执行,这时候回调确定是不会执行的,所以若是这个时候无限定时时间到了会再次插入回调,这个时候若是发现队列中的第一次回调没有执行,那么再次插入的回调浏览器就默认取消,(这是以防出现回调连续执行屡次的状况)可是这又引起了新的状况就是有些回调是不能取消掉的?

这就是咱们常用例一代替例二的缘由,例一能够避免上述的状况。累,很简单的东西被我说的这么复杂,我也是醉了,看来文字功底还很欠缺,但是个人梦想是新时代的做家,这可咋整呢?