浅谈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游戏之是男人就下100层代码打包
Nov 08 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
详解如何使用nvm管理Node.js多版本
May 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图像处理函数大全(推荐收藏)
2013/07/11 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
美国现代家具购物网站:LexMod
2019/01/09 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
新教师岗前培训方案
2014/06/05 职场文书
申报材料格式
2014/12/30 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
Pillow图像处理库安装及使用
2022/04/12 Python
MySql数据库触发器使用教程
2022/06/01 MySQL