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 相关文章推荐
jQuery Ajax 全解析
Feb 08 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
RequireJs的使用详解
Feb 19 Javascript
编写React组件项目实践分析
Mar 04 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 Javascript
Vue组件跨层级获取组件操作
Jul 27 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
玛琪朵 Macchiato
2021/03/03 咖啡文化
使用无限生命期Session的方法
2006/10/09 PHP
10个php函数实用却不常见
2015/10/13 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
JavaScript中的property和attribute介绍
2011/12/26 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
JSON格式化输出
2014/11/10 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
python简单获取数组元素个数的方法
2015/07/13 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python编程argparse入门浅析
2018/02/07 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
python中_del_还原数据的方法
2020/12/09 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
Java面试题及答案
2012/09/08 面试题
公司晚会主持词
2014/03/22 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
合同范本之电脑出租
2019/08/13 职场文书