• setTimeout与setInterval的坑以及优缺点


    说到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坑比的原因啊,因为这会出现一种情况,当我们插入回调的时候前队列有别的代码在执行,这时候回调肯定是不会执行的,因此如果这个时候无限定时时间到了会再次插入回调,这个时候如果发现队列中的第一次回调没有执行,那么再次插入的回调浏览器就默认取消,(这是以防出现回调连续执行多次的情况)但是这又引发了新的情况就是有些回调是不能取消掉的?

    这就是我们经常使用例一代替例二的原因,例一可以避免上述的情况。累,很简单的东西被我说的这么复杂,我也是醉了,看来文字功底还很欠缺,可是我的梦想是新时代的作家,这可咋整呢?

     

  • 相关阅读:
    LeetCode Array Easy 414. Third Maximum Number
    LeetCode Linked List Medium 2. Add Two Numbers
    LeetCode Array Easy 283. Move Zeroes
    LeetCode Array Easy 268. Missing Number
    LeetCode Array Easy 219. Contains Duplicate II
    LeetCode Array Easy 217. Contains Duplicate
    LeetCode Array Easy 189. Rotate Array
    LeetCode Array Easy169. Majority Element
    LeetCode Array Medium 11. Container With Most Water
    LeetCode Array Easy 167. Two Sum II
  • 原文地址:https://www.cnblogs.com/yuyunfei/p/5479766.html
Copyright © 2020-2023  润新知