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

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

     

  • 相关阅读:
    管理业务IT从业人员转型生产管理1
    坐标系基准面地图投影系列介绍(二)_ 地理坐标系
    优化UVA11401(Triangle Counting)
    最小匹配hdu 3991 Harry Potter and the Present II
    解析xml——采用Jdom与dom4J方式写入xml文档
    解析xml——采用Jdom与dom4J方式读xml文档
    解析xml笔记总纲
    使用zoom.js 给博客园的图片添加点击图片放大功能
    Hello China V1.75版本运行截图
    基于visual c++之windows核心编程代码分析(26)实现文件关联
  • 原文地址:https://www.cnblogs.com/yuyunfei/p/5479766.html
Copyright © 2011-2022 走看看