浅谈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 相关文章推荐
JavaScript中的Array对象使用说明
Jan 17 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
layui动态表头的实现代码
Aug 22 Javascript
js 函数性能比较方法
Aug 24 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 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
python爬虫增加访问量的方法
2019/08/22 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
.net工程师笔试题
2012/06/09 面试题
大学生怎样进行自我评价
2013/12/07 职场文书
节能减排倡议书
2014/04/15 职场文书
党课心得体会范文
2014/09/09 职场文书
观后感格式
2015/06/19 职场文书