浅谈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字符串拼接的效率问题
Dec 25 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 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
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
实现无刷新联动例子汇总
2015/05/20 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
Python下Fabric的简单部署方法
2015/07/14 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
python requests.get带header
2020/05/05 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
新员工欢迎词
2014/01/12 职场文书
学生党员公开承诺书
2014/05/28 职场文书
2014年食堂工作总结
2014/11/20 职场文书
小学语文复习计划
2015/01/19 职场文书
教师节祝酒词
2015/08/11 职场文书
导游词之南京中山陵
2019/11/27 职场文书
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers