事件循环Event loop

发布时间 2023-11-28 15:31:06作者: 来菜

事件循环总体就是对于,宏任务和微任务执行顺序的理解;

今天看循环给我看的有点迷,又看了几篇,总体就是

【宏任务(微任务)】=》【宏任务(微任务)】

我们先执行宏任务,然后执行微任务。下一个宏任务执行之前我们要先将上一个宏任务产生的微任务给执行完毕。

// 位置 1 【存入宏任务】
setTimeout(function () {
    console.log('宏任务');
});

// 位置 2
console.log('start');

// 位置 3
Promise.resolve().then(function () {
    // 位置 5
    console.log('微任务');
    // 位置 6
    Promise.resolve().then(function () {
        // 【存入宏任务】
        setTimeout(function () {
            console.log('微任务微任务宏任务');
        });
        console.log('微任务微任务');
    });
    // 位置7
    Promise.resolve().then(function () {
        Promise.resolve().then(function () {
            console.log('微任务微任务微任务');
        });
        console.log('微任务微任务');
    });
    // 位置 8【存入宏任务】
    setTimeout(function () {
        // 位置 9
        Promise.resolve().then(function () {
            console.log('微任务宏任务微任务');
        });
        // 位置 10
        console.log('微任务宏任务')
    });
});

// 位置 4
console.log('done');

这里面就直接的表明了整体代码【宏任务】执行之后,会将所有执行产生的微任务执行完毕;

start

done

微任务

微任务微任务

微任务微任务

微任务微任务微任务

宏任务

微任务宏任务

微任务宏任务微任务

微任务微任务宏任务