从setTimeout看js函数执行过程


Posted in Javascript onDecember 19, 2017

老实说,写这篇文章的时候心里是有点压抑的,因为受到打击了,为什么?就 因为喜欢折腾不小心看到了这个"简单"的函数:

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

什么?这不就是我很久之前看到的先打印一个5,再打印一个5,之后每隔一秒就打印一个5,直到打印完6个5的实现方法吗?那么问题来了,如果我要依次打印0,1,2,3,4,5的话我该怎么办,其实在这之前我就知道有这两个方法:一个是这样:

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

   还有一个是这样:

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

不怕笑话,在这之前我是没搞懂这两个函数真正意义上的作用是用来干嘛的,只强迫自己这样记住这样修改就可以了,但是现在不行啊,我有强迫症啊!于是,我慢慢分析了一下,发现上面那段代码可以分离成这样:

i=0时;满足条件;

setTimeout(function(){
console.log(i)
},0*1000);

i=1时;满足条件;

setTimeout(function(){
console.log(i)
},1*1000);

i=2时;满足条件;

setTimeout(function(){
console.log(i)
},2*1000);

i=3时;满足条件;

setTimeout(function(){
console.log(i)
},3*1000);

i=4时;满足条件;

setTimeout(function(){
console.log(i)
},4*1000);

i=5时,不满足条件,跳出循环,接着执行for循环后面的console.log(i),打印5;最后依次每秒打印5;

真有意思,为什么setTimeout里面的console.log会是后于for循环外面的console.log执行呢?直到我认识到了这个单词=>"队列", 队列又有宏任务队列(Macro Task)以及微任务队列(Micro Task)之分 ,在javascript中:

macro-task包括:script(整体代码), setTimeout , setInterval, setImmediate, I/O, UI rendering。

micro-task包括:process.nextTick, Promises , Object.observe, MutationObserver

上面函数的setTimeout就属于宏任务

在js中,事件循环的顺序是从script开始第一次循环,随后全局上下文进入函数调用栈,碰到macro-task就将其交给处理它的模块处理完之后将回调函数放进macro-task的队列之中,碰到micro-task也是将其回调函数放进micro-task的队列之中。直到函数调用栈清空只剩全局执行上下文,然后开始执行所有的micro-task。 当所有可执行的micro-task执行完毕之后。循环再次执行macro-task中的一个任务队列 ,执行完之后再执行所有的micro-task,就这样一直循环。

这就是为什么setTimeout里面的console.log会是后于for循环外面的console.log执行,在函数执行上下文中,seiTimeout函数会被放到处理他的macro-task的队列之中,所以循环的时候setTimeout里面的function是不会被执行的,而是等到所有整体代码(非队列)跑完之后才会执行队列中的函数;写到这里,可能会有点懵逼,其实我也有点懵逼,哈哈哈!!

为了加深理解,还可以试试在里面加入Promise,于是就有了这个:

(function copy() {
  setTimeout(function() {console.log(4)}, 0);
  new Promise(function executor(resolve) {
    console.log(1);
    for( var i=0 ; i<10000 ; i++ ) {
      i == 9999 && resolve();
    }
    console.log(2);
  }).then(function() {
    console.log(5);
  });
  console.log(3);
})()

解释一下=>

1.首先,script任务源先执行,全局上下文入栈。

2.script任务源的代码在执行时遇到setTimeout,作为一个macro-task,将其回调函数放入自己的队列之中。

3.script任务源的代码在执行时遇到Promise实例。Promise构造函数中的第一个参数是在当前任务直接执行不会被放入队列之中,因此此时输出 1 。

4.在for循环里面遇到resolve函数,函数入栈执行之后出栈,此时Promise的状态变成Fulfilled。代码接着执行遇到console.log(2),输出2。

5.接着执行,代码遇到then方法,其回调函数作为micro-task入栈,进入Promise的任务队列之中,此时Promise的then 里面的function回调函数跟setTimeout里面的function回调函数有着异曲同工之意,都会被放到各自的任务队列中,

 直到函数上下文即script中所有的非队列代码执行完毕后再执行,而且微任务队列优先于宏任务队列被处理,

  总体顺序为:上下文非队列代码>微任务队列回调函数代码>宏任务队列回调函数代码

6.代码接着执行,此时遇到console.log(3),输出3。

7.输出3之后第一个宏任务script的代码执行完毕,这时候开始开始执行所有在队列之中的micro-task。then的回调函数入栈执行完毕之后出栈,这时候输出5

8.这时候所有的micro-task执行完毕,第一轮循环结束。第二轮循环从setTimeout的任务队列开始,setTimeout的回调函数入栈执行完毕之后出栈,此时输出4。

最后,为了加深理解,再上一段代码:

console.log('golb1');
setTimeout(function() {
  console.log('timeout1');
  new Promise(function(resolve) {
    console.log('timeout1_promise');
    resolve();

setTimeout(function(){



console.log('time_timeout')


});

  }).then(function() {
    console.log('timeout1_then')
  })
  setTimeout(function() {
   console.log('timeout1_timeout1');
  });
})
new Promise(function(resolve) {
  console.log('glob1_promise');
  resolve();

setTimeout(function(){


 console.log('prp_timeout')


});
}).then(function() { console.log('glob1_then') })

如果你的执行结果是:golb1=>glob1_promise=>glob1_then=>timeout1=>timeout1_promise=>timeout1_then=>prp_timeout=>time_timeout=>timeout1_timeout1,

可能异步队列算是入门了吧!~~上面的代码看起来有点杂乱,可能用asyns搭配await改造一下会更好,但是这或多或少是鄙人从setTimeout中得到的见解吧

总结

以上所述是小编给大家介绍的从setTimeout看js函数执行过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS日历 推荐
Dec 03 Javascript
javascript 控制弹出窗口
Apr 10 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
mongoose更新对象的两种方法示例比较
Dec 19 #Javascript
jquery中done和then的区别(详解)
Dec 19 #jQuery
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 #Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 #Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 #Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 #Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 #Javascript
You might like
简单的用PHP编写的导航条程序
2006/10/09 PHP
PHP 转义使用详解
2013/07/15 PHP
如何使用php输出时间格式
2013/08/31 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
快速排序 php与javascript的不同之处
2011/02/22 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
对python添加模块路径的三种方法总结
2018/10/16 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
求职推荐信范文
2013/12/01 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
法院个人总结
2015/03/03 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android