从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 相关文章推荐
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
JavaScript数组去重的五种方法
Nov 05 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
python实现发送邮件功能
2017/07/22 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
直接有效的自我评价
2014/01/11 职场文书
教师队伍管理制度
2014/01/14 职场文书
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
《假如》教学反思
2014/04/17 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
家庭聚会祝酒词
2015/08/11 职场文书