浅谈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 相关文章推荐
JS 的应用开发初探(mootools)
Dec 19 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
微信小程序block的使用教程
Apr 01 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 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开发GUI
2006/10/09 PHP
使用php4加速网络传输
2006/10/09 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
php微信开发之谷歌测距
2018/06/14 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
js parsefloat parseint 转换函数
2010/01/21 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
python django事务transaction源码分析详解
2017/03/17 Python
关于Django外键赋值问题详解
2017/08/13 Python
python实现静态web服务器
2019/09/03 Python
python3.8下载及安装步骤详解
2020/01/15 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
介绍一下gcc特性
2015/10/31 面试题
应用电子技术专业个人求职信
2013/09/21 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技
Android中的Launch Mode详情
2022/06/05 Java/Android