浅谈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 相关文章推荐
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
vue实现折线图 可按时间查询
Aug 21 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
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目录操作函数之获取目录与文件的类型
2010/12/29 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
Django实现内容缓存实例方法
2020/06/30 Python
实习自我鉴定模板
2013/09/28 职场文书
毕业生多媒体设计求职信
2013/10/12 职场文书
八一建军节慰问信
2015/02/14 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang