Js事件循环机制EventLoop

Js事件循环机制EventLoop

js特点为单线程、但通过事件循环机制配合回调函数实现异步多线程的效果

事件循环机制三个关键

调用栈: 执行主线程代码

消息队列：执行fetch、setTimeout、setInterval的异步代码

微任务队列：执行promise、async、await的异步代码

宏任务与微任务：

宏任务：(macro)task，由宿主发起、可以理解是每次调用栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）。

宏任务包含：

script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)

微任务：由JavaScript自身发起的任务、可以理解是在当前宏任务执行结束后立即执行的任务

微任务包含：

Promise.then
Object.observe
MutationObserver
process.nextTick(Node.js 环境)

执行顺序:

1、调用栈（宏任务执行）

2、微任务队列(调用栈加入的微任务会立马执行、但其异步操作会在微任务队列中、待调用栈清空后执行)

3、消息队列(待调用栈、微任务队列清空执行)

代码测试

    
	let p = new Promise(resolve => {// 此处为 调用栈加入的微任务会立马执行
        console.log(4) // 此处会立马执行
        resolve(5) // 此处会立马执行、但此处异步操作会放入微任务队列、待调用栈清空执行
    })
    function  f1() {
        console.log(1) 
    }
    function f2() {
        setTimeout(()=>{
            console.log(2)// 处异步操作会放入消息队列、待调用栈清空执行
        },0)
        f1()
        console.log(3)
        p.then(result =>{ 
            console.log(result)
        })
    }
    f2()

答案

4 1 3 5 2