浅谈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中removeAttr()方法用法实例
Jan 05 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
js实现产品缩略图效果
Mar 10 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
Vuex实现购物车小功能
Aug 17 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与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
Js 刷新框架页的代码
2010/04/13 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
Python网络爬虫实例讲解
2016/04/28 Python
浅谈Python中函数的参数传递
2016/06/21 Python
python异常和文件处理机制详解
2016/07/19 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
浅析python的优势和不足之处
2018/11/20 Python
python动态进度条的实现代码
2019/07/03 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
家长会学生演讲稿
2014/04/26 职场文书
药店采购员岗位职责
2014/09/30 职场文书
见习报告格式范文
2014/11/08 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
思想道德自我评价2015
2015/03/09 职场文书
nginx安装以及配置的详细过程记录
2021/09/15 Servers
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL