用大白话告诉你什么是Event Loop

文章原文地址

前沿

从前有座山,山里有座庙,庙里有个小和尚在讲故事、讲什么呢?讲的是:

从前有座山,山里有座庙,庙里有个小和尚在讲故事、讲什么呢?讲的是:

从前有座山,山里有座庙,庙里有个小和尚在讲故事、讲什么呢?讲的是:

...

请看一个小故事

image

以前有一个餐厅,这个餐厅有一个老板和一个厨师,自己创业的,刚开始起步阶段,没有资金请员工,所以自己来当老板兼服务员。

由于刚开业,所以会有一个充值优惠的活动,充了1000元超级VIP客户,充了100元以上的是VIP客户

所以来这家餐厅的顾客有这四种类型

家里有矿的超级VIP客户

充了钱的VIP客户

普通的客户

每次吃饭都带着一群人来吃的客户

作为VIP顾客,肯定得有VIP特权。

优先上菜

同等VIP,先点菜的先上菜

所以这个店的上菜顺序跟身份和点菜的顺序有关,

超级VIP客户 > VIP客户 > 普通客户 > 一桌的客户

这里为什么普通客户会大于一桌的客户呢?主要是因为炒一个人的菜比炒一桌人的菜快

一天、老板开始营业后,陆陆续续的来了一些人进来点餐吃饭。

第一个进来的是普通的客户,点了一道回锅肉

第二个进来的是充了钱的VIP客户,点了一道小龙虾

第三个进来的是一群人一起吃饭的客户,点了很多菜

第四个进来的是一个超级VIP客户,点了一道酸菜鱼

由于这个店只有一个人,所以老板招待好他们点完餐之后就去炒菜了。根据上面提到的顺序,所以会先炒超级VIP客户点的菜、然后到VIP客户点的菜、然后到普通客户点的菜、最后到一桌的客户点的菜

让我们用伪代码看看如何实现这个逻辑

image

我们定义了四个function

superVipOrder(name, dish) 用来表示超级VIP用户下单点菜

vipOrder(name, dish) 用来表示VIP用户下单点菜

order(name, dish) 用来表示普通用户下单点菜

groupOrder(name, dish) 用来表示一桌子客户下单点菜

image

根据上面提到的上菜规则,

超级VIP客户 > VIP客户 > 普通客户 > 一桌的客户

实际的上菜顺序我们可以知道是

image

那么问题来了,那些function都是什么呢?

其实很简单,这些function都对应着JavaScript中的一些异步函数

// 超级VIP客户 // 微任务,将回调加入到 执行队列,优先执行 function superVipOrder(name, dish, order) { process.nextTick(() => { console.log(red(`superVip顾客 ${name} 点了 ${dish} 已经上了`)); }); } // VIP客户 // 微任务,将回调加入到 执行队列,优先执行,优先级比process.nextTick低 function vipOrder(name, dish, order) { new Promise((resolve, reject) => { resolve(true); }).then(() => { console.log(blue(`vip顾客 ${name} 点了 ${dish} 已经上了`)); }); } // 普通客户下单 // 宏任务,将回调加入到 宏任务的执行队列中 function order(name, dish, order) { setTimeout(() => { console.log(yellow(`普通顾客 ${name} 点了 ${dish} 已经上了`)); }, 0); } // 一桌的客户 function groupOrder(name, dish, order) { setImmediate(() => { console.log(green(`一桌子顾客 ${name} 点了 ${dish} 已经上了`)); }); }

我们可以暂且先把 process.nextTick 认为是超级vip用户,优先级最高、

原生Promise认为是vip用户,执行优先级高

setTimeout 认为是普通用户,执行优先级一般

setImmediate 认为是一群用户,执行优先级低

还原伪代码

我们将伪代码还原成这些异步函数,这会让我们看的更加直观、亲切一些

image

根据上面故事提到的优先级规则,我们知道输出的结果是这样的

image

为什么会是这样的结果呢?下面就来讲讲JavaScript中的Event Loop

Event Loop 1. JavaScript的事件循环

image

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsswpw.html