js 事件流程

神膘护体小月半

已于 2023-07-10 17:41:31 修改

阅读量584

点赞数 3

文章标签： javascript 前端开发语言

于 2023-04-12 16:50:30 首次发布

本文链接：https://blog.csdn.net/weixin_42154189/article/details/130111089

版权

JavaScript是单线程的，它使用事件循环处理异步任务。当遇到异步操作时，任务会被放入任务队列。主线程执行完同步代码后，会检查任务队列，先执行微任务，再执行宏任务。例如，setTimeout会被放入宏任务队列，Promise的then属于微任务。给定的代码示例展示了这个执行顺序。

摘要由CSDN通过智能技术生成

描述

JavaScript 的执行是单线程的，后面的任务需要等待前面的任务完全完成后，再去执行。
DOM 事件（文件的加载等）、定时器、网络请求等事件，并不会消耗 CPU，这些事件无需等候，所以出现了异步。
主线程进行中，将异步事件交给专有模块去处理，当主线程完成后，再去读取异步事件归并到主线程进行处理。

事件流程

主线程读取代码，形成响应的堆和任务栈
遇到异步的时候，将事件加入到任务队列
主线程执行完毕后，查询任务队列，执行队列中的事件
按顺序，先执行微任务
再次读取任务队列，如果不再有微任务，开始按顺序执行宏任务
队列执行完毕

在这里插入图片描述

let timeOut1 = setTimeout(()=>{
    console.log('1');
    let promise1 = new Promise(function (resolve, reject) {
        console.log('2');
        let timeOut2 = setTimeout(()=>{
            console.log('3')
        }, 0);
        resolve();
    }).then(function () {
        console.log('4')
    })
}, 0);
console.log('5');
let timeOut3 = setTimeout(()=>{
    console.log('6')
}, 0)
async function func1(){
    console.log('7');
    await func2();
    console.log('8');
}
function func2(){
    console.log('9');
}
func1();
let promise2 = new Promise(function (resolve, reject) {
    console.log('10');
    resolve();
}).then(function () {
    console.log('11');
}).catch(function () {
    console.log('12');
})
console.log('13')
// 5 7 9 10 13 8 11 1 2 4 6 3