从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 相关文章推荐
jquery中append()与appendto()用法分析
Nov 14 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 Javascript
react中hook介绍以及使用教程
Dec 11 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
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
《在家里》教后反思
2014/03/01 职场文书
2014年管理工作总结
2014/11/22 职场文书
安全承诺书
2015/01/19 职场文书
博士给导师的自荐信
2015/03/06 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
工作态度怎么写
2015/06/25 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python