JavaScript中事件循环(一)

同步任务和异步任务

js是单线程语言，但会遇到耗时大的任务，此时会将任务分为两类 同步任务和异步任务

执行过程

• 同步任务进入主线程，也可称为同步队列，异步任务，并入Event Table 注册函数
• 异步任务完成后，会进入Event Queue 异步任务队列
• 主线程内任务执行完成后，同步队列为空，才会去读取Event Queue 中的函数，进入主线程执行

而这个执行过程会不断循环，这个循环就是Event Loo事件循环

setTimeout

setTimeout(() => {
    console.log('延时3秒');
},3000)

上面的代码实际上会大于3秒才会打印

但是setTimeout中的延时指的是延时进入Event Queue ，但主线程中任务执行时间超过其实延时时间时，setTimeout中的执行时延将会比实际大

setTimeout(() => {
    task()
},3000)

sleep(10000000)
//远超三秒后才打印

宏任务和微任务

macro-task(宏任务)和micro-task（微任务）

宏任务包含

• script(整体代码)
• setTimeout
• setInterval
• setImmediate
• I/O
• UI render

微任务

• process.nextTick
• Promise
• Async/Await (实际就是promise)
• MutationObserver (html5新特性)

而浏览器对微任务和宏任务的执行过程，是先执行宏任务，再执行由宏任务产生的微任务

       console.log('1');
        setTimeout(function () {
            console.log('2');
            process.nextTick(function () {
                console.log('3');
            })
            new Promise(function (resolve) {
                console.log('4');
                resolve();
            }).then(function () {
                console.log('5')
            })
        })
        process.nextTick(function () {
            console.log('6');
        })
        new Promise(function (resolve) {
            console.log('7');
            resolve();
        }).then(function () {
            console.log('8')
        })
        setTimeout(function () {
            console.log('9');
            process.nextTick(function () {
                console.log('10');
            })
            new Promise(function (resolve) {
                console.log('11');
                resolve();
            }).then(function () {
                console.log('12')
            })
        })

依次输出 1，7，6，8，2，4，3，5，9，11，10，12

1 7 6 8 执行第一轮宏任务及其微任务

2 4 3 5 执行第二轮

9 11 10 12 执行第三轮

async/await执行顺序

async会隐式返回Promise作为结果的函数，所以可以理解为当await 后面的函数执行完毕时，会返回一个微任务；

await 在其后面函数执行完成会跳出async函数，此时会保留该async函数的上下文，执行下面的函数。当该轮宏任务中微任务执行完毕后，执行权会返回async函数内，并执行await下面的函数

console.log('script start')

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

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

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

console.log('script end')


 // 旧版谷歌执行结果，新版await会快一点
// script start => async2 end => Promise => script end => promise1 => promise2 => async1 end => setTimeout

（理解的还不够深入，后续需要继续深入…）