事件循环

最新推荐文章于 2024-10-02 05:39:15 发布

彼岸悠扬

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量110

点赞数

分类专栏：前端笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_44991580/article/details/116565789

版权

前端笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

事件循环

JavaScript代码执行机制

所有同步任务都在主线程的栈中执行
主线程之外,还存在一个任务队列。当异步任务有了运行结果，就会在任务队列中放置一个事件。
当栈中的所有同步任务执行完毕，系统就会读取任务队列，选择出需要首先执行的任务（由浏览器决定）

宏任务与微任务

MacroTask(宏任务): setTimeout, setInterval, requestAnimationFrame, I/O
MicroTask(微任务):process.nextTick, Promise.then, Object.observe, MutationObserver
优先级: 同步任务 > 微任务 > 宏任务

console.log(1)// 主线程同步任务

setTimeout(
() => {// 异步-宏任务
	console.log(2)
}
, 0)// 主线程同步任务

new Promise((resolve, reject) => {// 主线程同步任务
	console.log(3)
	resolve()
}).then(() => {// 异步-微任务
	console.log(4)
})// 主线程同步任务

console.log(5)// 主线程同步任务
// 1 -> 3 -> 5 -> 4 -> 2

console.log(1)

setTimeout(() => {
    console.log(2)
    new Promise((resolve) => {
        console.log(3)
        resolve()
    }).then(() => {
        console.log(4);
    })
}, 0)

new Promise((resolve) => {
    console.log(5);
    resolve()
}).then(() => {
    console.log(6);
})

setTimeout(() => {
    console.log(7)
    new Promise((resolve) => {
        console.log(8)
        resolve()
    }).then(() => {
        console.log(9);
    })
    console.log(10);
}, 0)

console.log(11);

// 1 -> 5 -> 11 -> 6 -> 2 -> 3 -> 4 -> 7 -> 8 -> 10 -> 9