JavaScript入门第六弹——分分钟get Event Loop

Event Loop

Hello，大家好，今天给大家带来的是Event Loop（事件循环）专题。

1 JavaScript的语言特点——单线程

我们首先来说说JS的运行机制，JS的最大特点就是单线程运行，不像Java等语言，可以创建thread。因为JS是脚本语言，JS的最主要用途是与用户互动和操作DOM，如果不是单线程，就会出现浏览器不知道先处理哪个线程不知以哪个线程为主的问题。

有小伙伴会说在H5中提出了Web Worker的概念，允许JS创建多线程，但是这并不与JS的单线程机制矛盾，因为创建的子线程必须受主线程的控制，且不能操作DOM。

2 什么是任务队列，什么是执行栈

既然JS是单线程的，那么就代表着JS代码的执行要按照一定的顺序排队在主线程执行。但是我们知道有些任务执行起来比较慢，这就会造成后续任务的阻塞，因此JS也设计了一个机制，将任务分为同步任务和异步任务对不同类型的任务进行处理。

同步任务：指在主线程上排列执行的任务，所有任务在主线程运行，并形成一个执行栈。只有前一个任务执行完毕，才能执行后一个任务；

异步任务：不会停下来等待异步任务的执行，而是将其挂起，继续执行执行栈中的同步任务，当异步任务又返回结果时，进入任务队列的任务，当任务队列告诉主线程，某个异步任务可执行了，该任务则会进入主线程执行。

除了主线程，还存在一个任务队列，异步任务有了运行结果，就在任务队列中放置一个事件。一旦执行栈中的同步任务执行完毕，就读取任务队列，对应的异步任务结束等待状态，进入执行栈并开始执行。

3 事件和回调函数

任务队列事件：IO设备事件、用户交互事件（鼠标点击、页面滚动），指定过回调函数，事件发生时就可以进入任务队列，等待主线程的读取了。

回调函数：指的是被主线程挂起的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的函数。

4 重点来啦：Event Loop

总结一下Event Loop吧～

1. 同步任务会排好队，在主线程上按照顺序执行，前面执行完执行后面的；
2. 执行栈中的同步任务执行完成后，主线程闲下来，去查看任务队列是否有任务，有则将最先进入任务队列的任务加入到执行栈中执行，执行栈中的任务执行完了之后，主线程便又去任务队列中查看是否有任务可执行。
3. 不断循环主线程去任务队列读取任务到执行栈的过程。 借一张图说明一下JavaScript的运行机制：（图片来源于网络）

5 定时器

定时器主要涉及两个常用函数，setTimeout(), setInterval()，前者是一次执行，后者反复执行，两者内部运行机制相同

setTimeout()接受两个参数，第一个是回调函数，第二个是推迟执行的毫秒数

setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会得到执行。

因为主线程中任务执行也需要时间，所以定时器的时间其实不是很精准。

6 宏任务与微任务

这时，有的同学就会问了，那不同的异步任务执行顺序又是怎样的呢？其实对于异步任务，JS还有进一步的划分，即宏任务（macro task）和微任务（micro task），它们也会被分别加入不同的队列（宏任务队列和微任务队列）。

1. 主线程执行同步任务
2. 主线程查看微任务，没有微任务则取宏任务的最前面的事件加入执行栈执行；有则将所有微任务中的事件依次加入执行栈执行，执行完毕后，再去宏任务中获取最前面的事件加入执行栈
3. 反复以上循环

宏任务：setTimeout, setInterval, etc

微任务：new Promise, etc

今天的文章就更新到这里啦，不知道大家有没有理解事件的循环机制呢，兔妞自己觉得梳理完更清晰了呢～～喜欢兔妞文章请点击好看让更多人看到哦，么么哒～～