浅谈JavaScript中setInterval和setTimeout的使用问题


Posted in Javascript onAugust 01, 2015

说到setInterval,就不得不提到setTimeout,二者都是用于定时执行某函数,区别在于setTimeout 只执行一次,而setInterval可以一直连续不断执行下去,典型用法如下:

function do_sth() { console.log('Hello...'); }
setTimeout(do_sth, 2500);  // 2.5 秒后,执行 do_sth 函数(只执行一次)
setInterval(do_sth, 3500); // 3.5 秒后,执行 do_sth 函数(每隔 3.5 秒执行一次,一直执行下去)

表面看上去,二者各有各的用途,没什么问题。但是如果setInterval所执行的函数是比较耗时的动作,setInterval仍然会按照原计划安排调用那个函数,而不考虑之前的任何阻塞,这样随着时间的推移,队列中等待执行的函数就会越来越多。而对于此问题解决方案仍然是采用递归调用setTimeout 的方法,如:

function do_sth() {
 console.log('Hello...');  // 即使这里执行比较耗时的动作也没问题,
                  // 等这里执行完了才会再去调用 setTimeout

 setTimeout(do_sth, 2500); // 安排后续执行
}

do_sth();             // 初次执行

这种递归调用的方式,既可以达到循环执行某函数的目的,有可以防止后续任务不断堆积。

如果你觉得这种方式有点罗嗦,还可以再写得精炼一些:

(function() {
 console.log('Hello...');  // do something here
 setTimeout(arguments.callee, 2500);
})();

说是这么说,但是如果定时执行的任务开销很少,setInterval一般是没什么问题的,但是如果任务开销比较大,请务必使用setTimeout。

Javascript 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 Javascript
JavaScript图片轮播代码分享
Jul 31 #Javascript
简单实现异步编程promise模式
Jul 31 #Javascript
JavaScript数据类型判定的总结笔记
Jul 31 #Javascript
jquery代码实现多选、不同分享功能
Jul 31 #Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 #Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 #Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 #Javascript
You might like
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
JavaScript事件列表解说
2006/12/22 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
Node.js模块加载详解
2014/08/16 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
JS实现页面打印功能
2017/03/16 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
详解webpack babel的配置
2018/01/09 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
酒店管理自荐信
2013/10/23 职场文书
大四学年自我鉴定
2013/11/13 职场文书
项目经理任命书
2014/06/04 职场文书
捐助倡议书
2015/01/19 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
分享python函数常见关键字
2022/04/26 Python