浅谈setTimeout 与 setInterval
2015-06-23 00:00
295 查看
最新写代码中时,看到项目中有人用到了 setTimeout(fun,0),于是想总结一下。个人理解,如果有错误的地方还请指出。THX
要想理解JavaScript的定时器是如何工作的,先要明白 JavaScript 引擎是单线程的。这个可以理解为 javascript 引擎是一个服务员,它有一个服务的队列,所有的界面元素事件,定时触发器回调,异步请求回调都要在这个任务队列里排队,等待处理。所有任务都是一个最小单位,不会中断处理。这样就可以理解 setTimeout(fun,0) 了,它并不是代表立即执行该代码,除非任务队列为空(事实上,各个浏览器在实际执行这个的时候也是有差异了,比较新的浏览器实际可能是在4ms;老版本的可能更长一点,16ms也是可能的)。而 setTimeout(fun,time) 的意思就是多少时间后将 fun 回调加到这个任务队列中,也就是至少需要time时间才会执行fun。
举个例子:
setTimeout(function () { console.log(1); }, 0); var tem = 0; for (var i = 1; i < 1000000; i++) { tem += i; }; console.log(2);
显示结果为
2 1
就是说,在执行 setTimeout 时,将 function 回调加入了任务队列,但并没有立即执行,因为js引擎还在忙着处理当前的js,而只在这段代码段执行完才去任务列表里取新的任务,所以结果就是先显示 2 后显示 1。
setInterval(fun, time)方法是,每隔一定时间将fun添加到队列中,那么问题来,如果fun执行时间比 time 要长的时候怎么办?
看一段代码
var num = 0; var time = setInterval(function () { var tem = 0; for (var i = 1; i < 99999999; i++) { tem += i; }; num ++; console.log(num); }, 100); setTimeout(function (){ clearInterval(time); }, 1000);
意思是每隔100ms执行一段代码,在1s中后清除这个定时器。但是结果呢?
显示结果为
1 2 3
也就是说,事实上,并没有执行到那么多次数。也就是说某些间隔会被跳过,这也就存在多个代码执行的间隔可能会比预期的小。原来在将定时器代码加入队列的时候,如果该定时器的代码实例存在时,该次定时器代码会被跳过。
引用一张图片,就很好理解了。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201506/6a18a1fab2e8e7b6161cf826d776fe75.jpg)
以上所述就是本文的全部内容了,希望大家能够喜欢。
相关文章推荐
- 使用JavaScript的AngularJS库编写hello world的方法
- js的flv视频播放器插件使用方法
- javascript框架设计之框架分类及主要功能
- 利用Redis实现亿级别用户登录统计(活跃度以及登录次数统计)
- Java基础—网络编程(一)
- 《大道至简——软件工程实践者的思想》阅读笔记之三
- angular指令
- 《项目总结》
- javascript框架设计之种子模块
- 简述AngularJS相关的一些编程思想
- javascript框架设计之浏览器的嗅探和特征侦测
- jQuery判断多个input file 都不能为空的例子
- javascript框架设计之类工厂
- Js+php实现异步拖拽上传文件
- 在Node.js中使用HTTP上传文件的方法
- 使用JavaScript实现旋转的彩圈特效
- jquery.gridrotator实现响应式图片展示画廊效果
- 使用Node.js实现HTTP 206内容分片的教程
- javascript创建函数的20种方式汇总
- 使用Raygun对Node.js应用进行错误处理的方法