浅谈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 使用手册(三)
Sep 23 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
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格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
解放web程序员的输入验证
2006/10/06 Javascript
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
jquery 面包屑导航 具体实现
2013/06/05 Javascript
玩转方法:call和apply
2014/05/08 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python制作刷网页流量工具
2017/04/23 Python
python中退出多层循环的方法
2018/11/27 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
python实现顺时针打印矩阵
2019/03/02 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
python实现人机猜拳小游戏
2020/02/03 Python
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
应届生会计电算化求职信
2013/10/03 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
工作会议方案
2014/05/21 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
公民代理授权委托书
2014/09/24 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
投诉信格式范文
2015/07/02 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL