你知道setTimeout是如何运行的吗?


Posted in Javascript onAugust 16, 2016

大家看下如下代码,猜猜执行结果:

var start = new Date;
setTimeout(function(){
 console.log('时间流逝了:'+(new Date - start)+'毫秒');
}, 200);
while (new Date - start < 1000) {}
console.log(1);
function doSoming(){
 setTimeout(function(){
  console.log('时间又流逝了:'+(new Date - start)+'毫秒');
 },10);
}
doSoming();
while (new Date - start < 2000) {}
console.log(2);

结果是:
约1秒后输出:1,
再过约1秒后输出:2,
接着才立即输出:时间流逝了: 2002 毫秒
最后输出:时间又流逝了: 2003 毫秒

您猜对了没?
这里通过setTimeout来延迟执行的函数都被推到最后才执行了;
原理如下:

在现有浏览器环境中,Javascript执行引擎是单线程的,主线程的语句和方法,会阻塞定时任务的运行,在Javascript执行引擎之外,存在一个任务队列,当在代码中调用setTimeout()方法时,注册的延时方法会挂到浏览器内核其他模块处理,当延时方法到达触发条件,即到达设置的延时时间时,该模块再将要执行的方法添加至该模块的任务队列中。这一过程与执行引擎主线程独立,执行引擎在主线程方法执行完毕,到达空闲状态时,才会从该模块的任务队列中顺序提取任务来执行,这期间的时间,可能大于注册任务时设置的延时时间;

浏览器在空闲状态下,会不断的尝试从模块的任务队列中提取任务,这称为事件循环模型;

再回头看下前面的代码,第二个setTimeout()的延迟方法的延迟时间是10毫秒,比第一个要早触发啊!为什么执行结果却在后面?因为它被之前的代码阻塞了约1000.5~1001毫秒了(视浏览器的处理速度),等他挂到处理模块,等到触发时间添加进任务队列时,第一个setTimeout()的延迟方法早就被添加到模块的任务队了,而引擎主线程是按顺序提取得,所以,你应该懂了吧?

现在,如果把上面的while (new Date - start < 1000) {}改成while (new Date - start < 189) {}或者是while (new Date - start < 190) {},结果又是什么?我就不多说了!各刷新浏览器20遍,自己看结果吧!

而setInterval()方法和setTimeout()地位是相同的,调用setInterval()方法时,注册的延时方法挂到模块处理,每当触发时间到达,就往任务队列添加一次要执行的方法;

下面来具体看看setTimeout的语法: 
var timeID = window.setTimeout(func,delay,[param1,param2,...]); 
var timeID = window.setTimeout(code,delay);
setTimeout和setInterval是Window对象的方法(可省略window),第二个之后的可选参数(IE9及旧版不支持)是传递给func的参数,每次调用他们时都会返回一个数字ID(在浏览器中打印出来就只是个数字,而本人在webstorm中打印出来发现它实际是一个对象,有很多个属性),这个ID保持着它对应的setTimeout或setInterval的相关信息,主要用来在中模块中和任务队列中清除(或关闭)掉它们(用方法clearTimeout(ID)和clearInterval(ID))。
如果你需要向你的回调函数内传递一个参数以下是兼容IE的写法 

if (document.all && !window.setTimeout.isPolyfill) {
 var __nativeST__ = window.setTimeout;
 window.setTimeout = function (vCallback, nDelay, param1, param2,param3) {
 var aArgs = Array.prototype.slice.call(arguments, 2);
 return __nativeST__(vCallback instanceof Function ? function () {
  vCallback.apply(null, aArgs);
 } : vCallback, nDelay);
 };
 window.setTimeout.isPolyfill = true;
}

一个常见的错误出现在循环中使用闭包 

for(var i =0; i <10; i++){
 setTimeout(function(){
  console.log(i); 
 },1000);
}

上面的代码只会输出数字 10 十次。为什么?闭包! 

当 console.log 被调用的时候,虽然匿名函数保持对外部变量 i 的引用,但此时 for循环已经结束, i 的值被修改成了 10. 

为了得到想要的结果,需要在每次循环中创建变量 i 的拷贝。 

为了正确的获得循环序号,最好使用 匿名包裹器(其实就是我们通常说的自执行匿名函数)。 

for(var i =0; i <10; i++){
 (function(e){
  setTimeout(function(){
   console.log(e); 
  },1000);
 })(i);
}

外部的匿名函数会立即执行,并把 i 作为它的参数,此时函数内 e 变量就拥有了 i 的一个拷贝。
 当传递给 setTimeout 的匿名函数执行时,它就拥有了对 e 的引用,而这个值是不会被循环改变的。
 有另一个方法完成同样的工作;那就是从匿名包装器中返回一个函数。这和上面的代码效果一样。 

for(var i =0; i <10; i++){
 setTimeout((function(e){
  return function(){
   console.log(e);
  }
 })(i),1000)
}

还有一个重要应用:函数节流(throttle)与函数去抖(debounce)
请看我从网上收集的一些资料:
JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)

参考链接: 
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout 
http://www.alloyteam.com/2015/10/turning-to-javascript-series-from-settimeout-said-the-event-loop-model/#prettyPhoto

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
jQuery插件开发汇总
May 15 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
深入理解(function(){... })();
Aug 16 #Javascript
关于JSON与JSONP简单总结
Aug 16 #Javascript
json与jsonp知识小结(推荐)
Aug 16 #Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 #Javascript
JS读写CSS样式的方法汇总
Aug 16 #Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 #Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 #Javascript
You might like
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
php smarty模版引擎中的缓存应用
2009/12/02 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
jquery map方法使用示例
2014/04/23 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
python的urllib模块显示下载进度示例
2014/01/17 Python
初步理解Python进程的信号通讯
2015/04/09 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Python模块搜索路径代码详解
2018/01/29 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
深入浅析Python传值与传址
2018/07/10 Python
对python周期性定时器的示例详解
2019/02/19 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
信息学院毕业生自荐信范文
2014/03/04 职场文书
校运会口号
2014/06/18 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers