浅谈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实现表格动态分页实现代码
Jun 21 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
Vue Object 的变化侦测实现代码
Apr 15 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
php中的观察者模式简单实例
2015/01/20 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
Javascript window对象详解
2014/11/12 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
python psutil模块使用方法解析
2019/08/01 Python
Python实现TCP通信的示例代码
2019/09/09 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
2015年班干部工作总结
2015/04/29 职场文书
初中同学会致辞
2015/08/01 职场文书
法律服务所工作总结
2015/08/10 职场文书
JavaScript实现音乐播放器
2022/08/14 Javascript