浅谈setTimeout 与 setInterval


Posted in Javascript onJune 23, 2015

最新写代码中时,看到项目中有人用到了 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

也就是说,事实上,并没有执行到那么多次数。也就是说某些间隔会被跳过,这也就存在多个代码执行的间隔可能会比预期的小。原来在将定时器代码加入队列的时候,如果该定时器的代码实例存在时,该次定时器代码会被跳过。

引用一张图片,就很好理解了。

浅谈setTimeout 与 setInterval

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jquery实现excel导出的方法
Apr 04 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
jquery不常用方法汇总
Jul 26 Javascript
js获取图片宽高的方法
Nov 25 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
vue配置多页面的实现方法
May 22 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 #Javascript
javascript中传统事件与现代事件
Jun 23 #Javascript
浅谈jquery中delegate()与live()
Jun 22 #Javascript
jquery 中ajax执行的优先级
Jun 22 #Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 #Javascript
jquery中toggle函数交替使用问题
Jun 22 #Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 #Javascript
You might like
example1.php
2006/10/09 PHP
PHP面向对象编程快速入门
2006/10/09 PHP
php str_pad 函数使用详解
2009/01/13 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
javascript 图片裁剪技巧解读
2012/11/15 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
用python与文件进行交互的方法
2018/03/01 Python
pandas 选择某几列的方法
2018/07/03 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python3实现高效的端口扫描
2019/08/31 Python
python修改文件内容的3种方法详解
2019/11/15 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
大学生工作推荐信范文
2013/12/02 职场文书
二年级语文教学反思
2014/02/02 职场文书
机关保密承诺书
2014/06/03 职场文书
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL