浅谈对于“不用setInterval,用setTimeout”的理解


Posted in Javascript onAugust 28, 2019

JavaScript高级程序设计(第三版)(以下简称红宝书)22.3高级定时器中详细介绍了定时器setTimeout和setInterval,看完书后,深入理解了二者的区别,结合前辈们给我的建议“用setTimeout,不要用setInterval”,写下此文,分析这个建议的合理性。
这两个家伙看上去长得差不多,func是要执行的函数,interval是时间间隔。

setTimeout(func,interval)
setInterval(func,interval)

关于时间间隔,红宝书中这么说:

设定一个 150ms 后执行的定时器不代表到了 150ms 代码就立刻执行,它表示代码会在 150ms 后被加入到队列中。如果在这个时间点上,队列中没有其他东西,那么这段代码就会被执行。

对于这个时间间隔的理解非常重要!步入正题,为何不用setInterval,因为它可能会带来两个问题:

  • “丢帧”现象
  • 不同定时器的代码的执行间隔比预期小

一图胜千言,如下图所示,让我们跟着时间线看看这样的问题怎么发生的。假定一个场景,在click事件中设置了setInterval(func,500),假设click事件和定时器内函数的执行时间都是1s,为了方便陈述,我把不同时间触发的func取了不同的名字,实际上接下来的func1=func2=func3=func。在0s处触发click事件,click事件执行,在0.2s处触发定时器,0.7s处第一个函数func1加入到事件队列,但由于JS引擎是单线程的,click事件还在执行,所以func1等待着,等到1s处,click事件执行完毕,fun1才开始执行。按照定时器的时间间隔,1.2s处第二个函数func2加入到事件队列,但此时fun1正在执行,所以func2只能等待。0.5s后,也就是1.7s处,第三个函数func理应加入事件队列,但是JS引擎做了一个事情:

当使用 set Interval()时,仅当没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中。

在1.7s处,func1在执行,func2在队列里等待执行,func2就是该定时器的代码实例,按照JS引擎的处理,func3不会加入到事件队列里,更别说执行了,这就导致出现了“丢帧”现象。而在图中也可以注意到,func1执行完毕,线程空闲了,func2就可以执行了,这就使得func1和func2之间的执行没有时间间隔,这跟我们所预期的500ms产生一次结果是不同的。

浅谈对于“不用setInterval,用setTimeout”的理解

而如果使用链式setTimeout调用,每次函数执行的时候都会创建一个新的定时器。第二个setTimeout()调用使用了 arguments.callee 来获取对当前执行的函数的引用,并为其设置另外一个定时器。这样做的好处是,在前一个定时器代码执行完之前,不会向队列插入新的定时器代码,确保不会有任何缺失的间隔。而且,它可以保证在下一次定时器代码执行之前,至少要等待指定的间隔,避免了连续的运行。代码如下所示

setTimeout(function(){
  //do something
  setTimeout(arguments.callee,interval);
},interval)

用setTimeout方法的话,上面假设的场景就发生了改变,如下图所示,在0s处触发click事件,click事件执行,在0.2s处触发定时器,0.7s处第一个函数func1加入到事件队列,click事件执行了1s,在1s处func1执行,2s处func1执行结束,第二个setTimeout定时器才被触发,0.5s后将函数func2加入队列,此时队列为空,func2开始执行,3.5s处func2执行结束,又一个setTimeout定时器被触发,0.5s后将函数func3加入队列,此时队列为空,func3开始执行。。。

浅谈对于“不用setInterval,用setTimeout”的理解

通过上面这个场景,我们能知道当需要用定时器来设置一个操作重复执行,并且这个操作需要执行一定的时间,记得用setTimeout,不用setInterval!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
微信小程序wx:for循环的实例详解
Oct 07 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
Vue的编码技巧与规范使用详解
Aug 28 #Javascript
JS开发自己的类库实例分析
Aug 28 #Javascript
详解Vue 换肤方案验证
Aug 28 #Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 #Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 #Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 #Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 #jQuery
You might like
供参考的 php 学习提高路线分享
2011/10/23 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
JavaScript 数组循环引起的思考
2010/01/01 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
vue接口请求加密实例
2020/08/11 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
Python import自定义模块方法
2015/02/12 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
python操作redis方法总结
2018/06/06 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
Java编程面试题
2016/04/04 面试题
如何写一份好的英文求职信
2014/03/19 职场文书
依法行政工作汇报
2014/10/28 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL