浅谈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限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
redux-saga 初识和使用
Mar 10 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 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/06/05 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
python简单实现基数排序算法
2015/05/16 Python
python 的列表遍历删除实现代码
2020/04/12 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
大家检讨书5000字
2014/02/03 职场文书
学前班评语大全
2014/05/04 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
大队委员竞选稿
2015/11/20 职场文书
导游词之张家口
2019/12/13 职场文书
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
python函数的两种嵌套方法使用
2022/04/02 Python