JavaScript面试题-宏任务与微任务？

男娘i 2023-06-14 14:56 13阅读 0赞

## 宏任务&微任务 ##

macro-task(宏任务)：

*  包括整体代码script，setTimeout，setInterval
 *  宏任务所处的队列就是宏任务队列
 *  宏任务队列可以有多个

micro-task(微任务)：

*  new Promise.then(回调)，process.nextTick
 *  微任务所处的队列就是微任务队列
 *  只有一个微任务队列
 *  在上一个宏任务队列执行执行完毕后，如果有微任务队列就会执 行微任务队列中的所有微任务
 *  当宏任务队列的中的任务全部执行完以后，会查看是否有微任务队列，如果有先执行微任务队列中的所有任务，如果没有就查看是否有下一个宏任务队列重复执行之前的执行步骤。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

// 主线程（宏任务队列）
    
    console.log('==== start ====')
    
    // 第二个宏任务
    setTimeout(function () { 
        console.log('定时器')
    
        // 第三个宏任务
        setTimeout(function () { 
            console.log('定时器中的定时器')
        },0)
    
        new Promise(function (resolve) { 
            console.log('准备执行 for 循环111')
    
            for (let i = 0; i < 666; i++) { 
                i == 5 && resolve()
            }
            // .then 属于微任务，第二个宏任务中的微任务
        }).then(function () { 
            console.log('执行了 then 方法1111')
        })
    
    }, 0)
    
    console.log('==== end ====')
    
    new Promise(function (resolve) { 
        console.log('准备执行 for 循环222')
    
        for (let i = 0; i < 666; i++) { 
            i == 5 && resolve()
        }
        // 第一个宏任务（主线程）执行完成之后就会执行这个微任务
    }).then(function () { 
        console.log('执行了 then 方法2222')
    })

执行结果：

==== start ====
    ==== end ====
    准备执行 for 循环222
    执行了 then 方法2222
    定时器
    准备执行 for 循环111
    执行了 then 方法1111
    定时器中的定时器

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191028202300772.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70