js事件循环机制

从一个例子提及

var start = new Date()

setTimeout(function () {
    var end = new Date
    console.log('Time elapsed:', end - start, 'ms')
}, 500)

while (new Date() - start < 1000) {
}

有其余语言能完成预期的功能吗？Java, 在Java.util.Timer中，对于定时任务的解决方案是经过多线程手段实现的，任务对象存储在任务队列，由专门的调度线程，在新的子线程中完成任务的执行

js是单线程的

JavaScript的主要用途是与用户互动，以及操做DOM。这决定了它只能是单线程，不然会带来很复杂的同步问题。

为了利用多核CPU的计算能力，HTML5提出Web Worker标准，容许JavaScript脚本建立多个线程，可是子线程彻底受主线程控制，且不得操做DOM。因此，这个新标准并无改变JavaScript单线程的本质。

函数调用栈和任务队列

调用栈

JS执行时会造成调用栈,调用一个函数时,返回地址、参数、本地变量都会被推入栈中,若是当前正在运行的函数中调用另一个函数,则该函数相关内容也会被推入栈顶.该函数执行完毕,则会被弹出调用栈.变量也随之弹出,因为复杂类型值存放于堆中,所以弹出的只是指针,他们的值依然在堆中,由GC决定回收.

事件循环（event loop） & 任务队列（task queue）

JavaScript 主线程拥有一个执行栈以及一个任务队列

遇到异步操做（例如：setTimeout, AJAX）时，异步操做会由浏览器(OS)执行，浏览器会在这些任务完成后，将事先定义的回调函数推入主线程的任务队列(task queue)中,当主线程的执行栈清空以后会读取task queue中的回调函数,当task queue被读取完毕以后,主线程接着执行,从而进入一个无限的循环,这就是事件循环.

主线程执行栈 & 任务队列 循环执行，构成事件循环

结论

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

另外一个例子

(function test() {
    setTimeout(function() {console.log(4)}, 0);
    new Promise(function executor(resolve) {
        console.log(1);
        for( var i=0 ; i<10000 ; i++ ) {
            i == 9999 && resolve();
        }
        console.log(2);
    }).then(function() {
        console.log(5);
    });
    console.log(3);
})()

Macrotask & Microtask

macrotask 和 microtask 是异步任务的两种分类。在挂起任务时，JS 引擎会将全部任务按照类别分到这两个队列中，首先在 macrotask 的队列（这个队列也被叫作 task queue）中取出第一个任务，执行完毕后取出 microtask 队列中的全部任务顺序执行；以后再取 macrotask 任务，周而复始，直至两个队列的任务都取完。

• macro-task: script（总体代码）, setTimeout, setInterval, setImmediate, I/O, UI rendering
• micro-task: process.nextTick, Promises（这里指浏览器实现的原生 Promise）, Object.observe, MutationObserver

结论

所有代码(script) macrotask -> microtask queue (含有promise.then) -> macrotask(setTimeout) -> 下一个microtask

Node.js的事件循环

process.nextTick & setImmediate

• process.nextTick指定的任务老是发生在全部异步任务以前
• setImmediate指定的任务老是在下一次Event Loop时执行

process.nextTick(function A() {
  console.log(1);
  process.nextTick(function B(){console.log(2);});
});

setTimeout(function timeout() {
  console.log('TIMEOUT FIRED');
}, 0)

new Promise(function(resolve) {
    console.log('glob1_promise');
    resolve();
}).then(function() {
    console.log('glob1_then')
})
process.nextTick(function() {
    console.log('glob1_nextTick');
})

总结

经过学习函数调用栈，任务队列，MacroTask, MicroTask等概念，对js中的事件循环机制有更深的理解，在之后面对setTimeout, setInterval等异步操做时，更清晰的理解其运行机制，避免写出不可控的代码。

参考连接：

https://zhuanlan.zhihu.com/p/...

https://zhuanlan.zhihu.com/p/...

http://www.ruanyifeng.com/blo...