浅谈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生成asp.net服务器控件的代码
Feb 04 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
vue+iview动态渲染表格详解
Mar 19 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 Javascript
token 机制和实现方式
Dec 15 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 pack与unpack 摸板字符字符含义
2009/10/29 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
php生成验证码函数
2015/10/20 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
php远程下载类分享
2016/04/13 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
python编写弹球游戏的实现代码
2018/03/12 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
详解Python3注释知识点
2019/02/19 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
Python新手学习函数默认参数设置
2020/06/03 Python
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
学校募捐倡议书
2014/05/14 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书