JS事件循环

一、JS 单线程执行

二、定时器函数详解

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

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

        2、setInterval()

        setTimeout()只是将事件插入了"任务队列"，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。要是当前代码耗时很长，有可能要等很久，所以并没有办法保证，回调函数一定会在setTimeout()指定的时间执行。

        3、process.nextTick()

        process.nextTick方法可以在当前"执行栈"的尾部----下一次Event Loop（主线程读取"任务队列"）之前----触发回调函数。也就是说，它指定的任务总是发生在所有异步任务之前。

        4、setImmediate()

        setImmediate方法则是在当前"任务队列"的尾部添加事件，也就是说，它指定的任务总是在下一次Event Loop时执行，这与setTimeout(fn, 0)很像。

三、任务队列执行逻辑

一下均参考自https://juejin.im/post/5a63470bf265da3e2c383068

        

四、案例

        

        解析：

我们代码的开始执行都是从script（全局任务）开始，这个全局任务属于宏任务；代码由上向下执行；

1. 第1行，遇到了一个timer异步任务，属于宏任务，放入宏任务队列；

2. 第8行，遇到log,内部没有其它函数，直接输出main1;

3. 第10行，函数的定义，不执行；

4. 第17行，遇到new Promise()，进入回调函数内部:

   1） 遇到promise.nextTick,属于微任务，放入微任务队列nextTick3;

   2） 遇到log,内部没有其它函数，直接输出promise 1;

   3） 遇到resolve回调，属于微任务，放入微任务队列promise then;

5. 第27行，遇到log,内部没有其它函数，直接输出main2;

6. 第29行，遇到promise.nextTick,属于微任务，放入微任务队列nextTick4;

7. 第33行，执行say()：

   1）遇到log,内部没有其它函数，直接输出hello;

   2）遇到promise.nextTick,属于微任务，放入微任务队列nextTick2;

   到此为止，我们已经做了如下事情：

   1）宏任务队列中放入了一个timer函数；

   2）输出了main1，promise 1，main2，hello1；

   3）微任务队列中已经放入了promise then,nextTick3,nextTick4,nextTick2;

此时，我们的全局任务已执行完成了，就要马上执行完整个微任务队列。但是在微任务中，process.nextTick 是一个特殊的任务，它会被直接插入到微任务的队首（当然了，多个process.nextTick 之间也是先入先出的），优先级最高。所以，依次输出nextTick3,nextTick4,nextTick2,promise then

8. 这时，执行栈为空了，可是别忘了，我们的宏任务队列还放者一个timer函数待执行，进入timer函数：

   1）遇到log,内部没有其它函数，直接输出setTimeout;

   2）遇到promise.nextTick,属于微任务，放入微任务队列nextTick1;

9. 这个timer宏任务也执行完了，就马上执行完整个微任务队列，微任务队列目前只有一个任务，直接输出nextTick1；

10. 这时，执行栈又为空了，还有其它任务吗? 没有了，大功告成；

以上的这种当函数执行栈为空，从任务队列中去一个任务来执行。再次为空，再取一个任务来执行，如此循环，这就是Event Loop，事件循环机制；

参考：

JavaScript 运行机制详解：再谈Event Loop：(http://www.ruanyifeng.com/blog/2014/10/event-loop.html)

浅析nodejs事件循环机制：(https://juejin.im/post/5a63470bf265da3e2c383068)