# js AAA

# 微任务、宏任务、Event-Loop

• 宏任务：I/0(用户交互)、setTimeout、setInterval、setImmediate、requestAnimationFrame

• 微任务：Promise.then catch finally、MutationObserver等、process.nextTick(node)

• 任务队列执行的过程：每次宏任务执行完，都去检查是否有微任务存在，如有，依次执行微任务，微任务执行结束后，返回继续执行下一个宏任务； 如没有微任务，则结束当前宏任务，继续执行下一宏任务。这个执行过程称为event-loop。

• 1、先执行主线程

• 2、遇到宏任务，放到宏队列

• 3、遇到微任务，放到微队列

• 4、主线程执行完毕

• 5、执行微任务，微队列执行完毕

• 6、执行一次宏任务中的一个任务，执行完毕

• 7、执行微任务，执行完毕

• 8、依次循环。。。

node环境中：

• process.nextTick 的执行优先级高于 Promise 的
• setTimeout 的执行优先级高于 setImmediate 的(浏览器中往往正好相反)

参考 12

# example 1

(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);
})();

1,2,3,5,4

Promise.then是异步执行的(微任务)，而创建Promise实例（executor）是同步执行的，而then中注册的回调才是异步执行的。

参考： 1

# example 2

async function async1() {
    console.log( 'async1 start' )
    await async2()
    console.log( 'async1 end' )
}

async function async2() {
    console.log( 'async2' )
}

console.log( 'script start' )

setTimeout( function () {
    console.log( 'setTimeout' )
}, 0 )

async1();

new Promise( function ( resolve ) {
    console.log( 'promise1' )
    resolve();
} ).then( function () {
    console.log( 'promise2' )
} )

console.log( 'script end' )

--> 任务队列布局如下：

    script start
    async1 start
    async2
    promise1
    script end
    promise2
    async1 end
    setTimeout

参考 1