setTimeout和setInterval的区别你真的了解吗?


Posted in Javascript onMarch 31, 2011

甚至可能会错误的把两个实现定时调用的函数理解成了类似thread一样的东西, 认为会在一个时间片内, 并发的执行调用的函数, 似乎很好很强大, 但其实并不是如此, 实际的情况是javascript都是以单线程的方式运行于浏览器的javascript引擎中的, setTimeout和setInterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中, 插入代码队列并不意味着你的代码就会立马执行的,理解这一点很重要. 而且setTimeout和setInterval还有点不一样.

先谈谈setTimeout

function click() { 
// code block1... 
setTimeout(function() { 
// process ... 
}, 200); 
// code block2 
}

假设我们给一个button的onclick事件绑定了此方法, 当我们按下按钮后, 肯定先执行block1的内容, 然后运行到setTimeout的地方, setTimeout会告诉浏览器说, "200ms后我会插一段要执行的代码给你的队列中", 浏览器当然答应了(注意插入代码并不意味着立马执行), setTimeout代码运行后, 紧跟其后的block2代码开始执行, 这里就开始说明问题了, 如果block2的代码执行时间超过200ms, 那结果会是如何? 或许按照你之前的理解, 会理所当然的认为200ms一到, 你的process代码会立马执行...事实是, 在block2执行过程中(执行了200ms后)process代码被插入代码队列, 但一直要等click方法执行结束, 才会执行process代码段, 从代码队列上看process代码是在click后面的, 再加上js以单线程方式执行, 所以应该不难理解. 如果是另一种情况, block2代码执行的时间<200ms, setTimeout在200ms后将process代码插入到代码队列, 而那时执行线程可能已经处于空闲状态了(idle), 那结果就是200ms后, process代码插入队列就立马执行了, 就让你感觉200ms后, 就执行了.
再看看setInterval
这里可能会存在两个问题:
1.时间间隔或许会跳过
2.时间间隔可能<定时调用的代码的执行时间
function click() { 
// code block1... 
setInterval(function() { 
// process ... 
}, 200); 
// code block2 
}

和上面一样我们假设通过一个click, 触发了setInterval以实现每隔一个时间段执行process代码

setTimeout和setInterval的区别你真的了解吗?

比如onclick要300ms执行完, block1代码执行完, 在5ms时执行setInterval, 以此为一个时间点, 在205ms时插入process代码, click代码顺利结束, process代码开始执行(相当于图中的timer code), 然而process代码也执行了一个比较长的时间, 超过了接下来一个插入时间点405ms, 这样代码队列后又插入了一份process代码, process继续执行着, 而且超过了605ms这个插入时间点, 下面问题来, 可能你还会认为代码队列后面又会继续插入一份process代码...真实的情况是,由于代码队列中已经有了一份未执行的process代码, 所以605ms这个插入时间点将会被"无情"的跳过, 因为js引擎只允许有一份未执行的process代码, 说到这里不知道您是不是会豁然开朗呢...

为了这种情况你可以用一种更好的代码形式

setTimeout(function(){ 
//processing 
setTimeout(arguments.callee, interval); 
}, interval);

这个估计稍微想一下, 就明白其中的好处了, 这样就不会产生时间点被跳过的问题内容就到这里, 希望能有所帮助, 可能我表达的不是很清楚如果觉得自己英语基础不错可以直接看

setTimeout和setInterval的区别你真的了解吗?
里有关advanced Timers这节内容,  个人认为这本书真的很不错, 无论是想从零学起, 还是平日没事翻翻参考参考 都很不错, 作者是yahoo里很牛的一位前端开发工程师 : )

Javascript 相关文章推荐
Javascript中Eval函数的使用说明
Oct 11 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
详解Webpack DLL用法以及功能
Jul 11 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 #Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 #Javascript
使用jquery为table动态添加行的实现代码
Mar 30 #Javascript
jquery 查找select ,并触发事件的实现代码
Mar 30 #Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 #Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 #Javascript
使用隐藏的new来创建对象
Mar 29 #Javascript
You might like
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
django中的ajax组件教程详解
2018/10/18 PHP
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
angular4中关于表单的校验示例
2017/10/16 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
Python实现DDos攻击实例详解
2019/02/02 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
手工社团活动方案
2014/02/17 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
先进单位申报材料
2014/12/25 职场文书
党员转正申请报告
2015/05/15 职场文书
离婚答辩状范文
2015/05/22 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers