浅谈javascript的Event Loop(事件循环)

浅谈javascript的Event Loop(事件循环)

无论是面试还是开发，我们总是有一些疑问
你：什么疑问？
如：不是说好了JavaScript是单线程么，处理的异步代码？
为什么我写的一个ajax请求，但是却先执行的下面的console.log？
再或者这样,
面试官：小王啊，你知道什么是事件循环么？
小王：emm…
五分钟后…
你这次表现的很优秀，但是和我们单位这个岗位有一些偏差，江湖再见！

那么，现在我们就以最短的事件了解javascript的Event Loop，敲黑板。。。
燃烧我的卡路里！

下面这段代码相信你一定不陌生！

setTimeout(function(){
     
    console.log('定时器开始啦')
}); 
console.log(123)
// 123
// 定时器开始啦

为什么呢？？？首先我们从JavaScript的执行机制开始说起！

众所周知，JavaScript代码在执行时，会进入一个执行上下文，执行上下文可以理解为一个当前代码的运行环境,在这个运行环境中，javascript会以一个栈的方式去处理它，执行完，出栈，轮到它，进栈。就像只有一个窗口的银行，客户需要排队一个一个办理业务，同理js任务也要一个一个顺序执行。如果一个任务耗时过长，那么后一个任务也必须等着。于是，把任务分成两类：

1. 同步任务
2. 异步任务
   聪明的你肯定已经猜到了，没错，我们执行栈中的任务都是同步任务，当我们执行完所有的同步任务之后，就会去访问另一个队列，这个队列中存放的是所有异步的任务，也就是我们常说的Event Table，如果我们执行完之后，去访问Event Table，但是，这里面还是有没执行完的怎么办？先把执行完的拿过来，跑完，然后继续去访问，继续跑，直到Event Table中的任务为空。如图：
   

导图要表达的内容用文字来表述的话：

1. 同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。
2. 当指定的事情完成时，Event Table会将这个函数移入Event Queue。
3. 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
4. 上述过程会不断重复，也就是常说的Event Loop(事件循环)。