你知道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 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
javascript 在firebug调试时用console.log的方法
May 10 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
第六节--访问属性和方法
2006/11/16 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python标准异常和异常处理详解
2015/02/02 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
python实现拓扑排序的基本教程
2018/03/11 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
详解python内置模块urllib
2020/09/09 Python
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
大学生社团活动总结
2014/04/26 职场文书
校庆团日活动总结
2014/08/28 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
会计出纳岗位职责
2015/03/31 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python