js 彻底搞懂事件循环机制 Event Loop

我们都知道javascript是单线程语言,就是因为单线程的特性,就不得不提js中的同步和异步

一、同步和异步

所谓单线程,无非就是同步队列和异步队列,js代码是自上向下执行的,在主线程中立即执行的就是同步任务,比如简单的逻辑操作及函数,而异步任务不会立马立马执行,会挪步放到到异步队列中,比如ajax、promise、事件、计时器等等。

也就是先执行同步,主线程结束后再按照异步的顺序再次执行。

二、时间循环(Event Loop)

Event Loop是什么?中文翻译是事件循环,等待主线程中任务全部完成后,再回来把异步队列中任务放到主程序中运行,这样反复的循环,就是事件循环。

先来看组代码

console.log('开始111');

setTimeout(function() {

console.log('setTimeout111');

}, 0);

Promise.resolve().then(function() {

console.log('promise111');

}).then(function() {

console.log('promise222');

});

console.log('开始222');

我们猜想一下上面的代码,会怎样打印?我们知道,肯定是先走同步的代码,从上往下,先打印 “开始111”,再打印“开始222”。
中途的三个异步,进入到了异步队列,等待同步执行完(打印完),返回来再执行异步,所以是后打印出来。
打印的结果先放一放,我们稍后回来再说。现在我们中途插播一段知识点:

三、宏观任务和微观任务(先执行微观任务,再执行宏观任务):

在事件循环中,每进行一次循环操作称为tick,tick 的任务处理模型是比较复杂的,里边有两个词:分别是 Macro Task (宏任务)和 Micro Task(微任务)。

简单来说:

宏观任务主要包含:setTimeout、setInterval、script(整体代码)、I/O、UI 交互事件、setImmediate(Node.js 环境)

微观任务主要包括:Promise、MutaionObserver、process.nextTick(Node.js 环境)

规范:先执行微观任务,再执行宏观任务

那么我们知道了,Promise 属于微观任务, setTimeout、setInterval 属于宏观任务,先执行微观任务,等微观任务执行完,再执行宏观任务。所以我们再看一下这个代码:

console.log('开始111');

 
setTimeout(function() {
 
  console.log('setTimeout111');
 
}, 0);
 
Promise.resolve().then(function() {
 
  console.log('promise111');
 
}).then(function() {
 
  console.log('promise222');
 
});
 
console.log('开始222');
 

我们按照步骤来分析下:

1、遇到同步任务,直接先打印 “开始111”。
2、遇到异步 setTimeout ,先放到队列中等待执行。
3、遇到了 Promise ,放到等待队列中。
4、遇到同步任务,直接打印 “开始222”。
5、同步执行完,返回执行队列中的代码,从上往下执行,发现有宏观任务 setTimeout 和微观任务 Promise ,那么先执行微观任务,再执行宏观任务。

所以打印的顺序为: 开始111 、开始222 、 promise111 、 promise222 、 setTimeout111 。

同理,我们再来分析一个代码:

console.log('开始111');

setTimeout(function () {

console.log('timeout111');

});

new Promise(resolve => {

console.log('promise111');

resolve();

setTimeout(() => console.log('timeout222'));

}).then(function () {

console.log('promise222')

})

console.log('开始222');

分析一下:

1、遇到同步代码,先打印 “开始111” 。
2、遇到setTimeout异步,放入队列,等待执行 。
3、中途遇到Promise函数,函数直接执行,打印 “promise111”。
4、遇到setTimeout ,属于异步,放入队列,等待执行。
5、遇到Promise的then等待成功返回,异步,放入队列。
6、遇到同步,打印 “开始222”。
7、执行完,返回,将异步队列中的代码,按顺序执行。有一个微观任务,then后的,所以打印 “promise222”,再执行两个宏观任务 “timeout111” “timeout222”。

所以,打印的顺序为:开始111 、 promise111 、 开始222 、 promise222 、 timeout111 、 timeout222 .

先执行主任务,把异步任务放入循环队列当中,等待主任务执行完,再执行队列中的异步任务。异步任务先执行微观任务,再执行宏观任务。一直这样循环,反复执行,就是事件循环机制。

(0)

相关推荐

  • 事件循环Event loop到底是什么

    摘要:本文通过结合官方文档MDN和其他博客深入解析浏览器的事件循环机制,而NodeJS有另一套事件循环机制,不在本文讨论范围中.process.nextTick和setImmediate是NodeJS ...

  • 事件循环 EventLoop(Promise,setTimeOut,async/await执行顺序)

    什么是事件循环?想要了解什么是事件循环就要从js的工作原理开始说起: JS主要的特点就是单线程,所谓单线程就是进程中只有一个线程在运行. 为什么JS是单线程的而不是多线程的呢? JS的主要用途就是与用 ...

  • Event Loop 是什么?

    Event Loop 是什么? 本文写于 2020 年 12 月 6 日 广义上来说 Event Loop 并不是 JavaScript 独有的概念,他是一个计算机的通用概念. 狭义上来说,只有 No ...

  • Event Loop

    文章 console.log('1'); setTimeout(function() { console.log('2'); process.nextTick(function() { console ...

  • Vue你不得不知道的异步更新机制和nextTick原理

    前言 异步更新是 Vue 核心实现之一,在整体流程中充当着 watcher 更新的调度者这一角色.大部分 watcher 更新都会经过它的处理,在适当时机让更新有序的执行.而 nextTick 作为异 ...

  • Stata:一文读懂事件研究法Event Study

    Stata:一文读懂事件研究法Event Study

  • 云台山风景区准备搞一件大新闻

    天气渐暖,燕子从遥远的南方归来了,蜜蜂.蝴蝶等很多昆虫也从沉睡中苏醒过来,又是一年的春天,又是一年的春风之日,面对这样的美景,面对这样的盛况,云台山风景区有了新的气象.很多人都将目光看向了云台山的花花 ...

  • 云台山风景区准备搞一件大事

    春天的云台山迎来了春的会晤,也迎来了醉美花的绽放. 无数的花盛放在云台山将这里装扮得格外的美丽.看山.看水.看风景,似乎是春天云台山的所有内容,然而其实并不是的,春天的云台山除了有花之外,还有非常多的 ...

  • 引流增长哥,闲鱼赚钱怎么月入过万,学会这四大循环机制小白也能做到。

    一.为什么选择闲鱼项目. 1.如果做淘宝成功率是1%,那么做闲鱼活下去的几率就是90%. 如果你深入思考你会发现,淘宝做好的卖家90%以上都是有货源.资金优势的.起初创业者做淘宝没有任何资源失败的几率 ...

  • 众多碳纤维行业大咖都要去世碳会 听说他们要搞一件大事情?

    看到题目,你一定有好几个问题想要问,先别急,且由小编来一步步来为你解答. 首先你一定想问世碳会是什么鬼?为什么碳纤维行业大咖要去? 世碳会是由某个专注于新材料行业研究,致力于推动新材料与战略新兴产业融 ...

  • HR们注意了!这个夏天,我们要为你搞一件不低调的大事儿!

    [2019年8月6日,上海]由中国领先的人力资源媒体公司HRoot"低调"举办的线上挑战赛--818 HR知识大作战,于今日正式官宣!   众所周知,8月18日是专门为人力资源从业 ...

  • 一文搞懂 PyTorch 内部机制

    译者序:这篇博文是一篇非常新的介绍PyTorch内部机制的文章,作者Edward Z Yang来自于Stanford大学,是PyTorch的核心开发者之一.文章中介绍了如何阅读PyTorch源码和扩展 ...

  • 浏览器的 Event Loop

    前端技术优选 昨天 以下文章来源于掘金开发者社区 ,作者小蘑菇哥哥 掘金开发者社区 掘金,一个帮助开发者成长的技术社区 前端技术优选 为你精选前端领域优质技术博文,欢迎关注. 57篇原创内容 公众号 ...