微任务宏任务

发表于:2020-06-04 20:45
js,浏览器
热度:349
喜欢:0

微任务队列宏任务队列

  1. javascript是单线程,多线程都是模拟出来的,
  2. script、setTimeOut、setInterval是宏任务
  3. Promise,process.nextTick是微任务
  4. setTimeOut是n毫秒之后,将回调函数放入任务执行队列;setInterval是每隔n毫秒将回调函数推入任务执行队列,不能保证n毫秒之后立即执行!
javascript 复制代码
setTimeout(()=>{
    console.log(1)
},0)
let i =0
while(i<10000){
    i++
   console.log(2) 
}

setTimeout(() => {
    console.log(3)
}, 0)
2 1 3

虽然setTimeout很早就注册了,但是要等到同步任务,宏任务执行完毕才执行微任务
再看一段复杂一点的

javascript 复制代码
console.log('1');
new Promise((resolve) => {
    console.log('1.1');
    resolve()
}).then(() => {
    console.log('2');
}).then(()=>{
    console.log('2.1')
})
console.log(4)

输出1 1.1 4 2 2.1
console.log是同步任务,new Promise之后取出

javascript 复制代码
console.log('1');                   //a同步任务,输出1
setTimeout(function() {             //b放入队列,宏任务   h执行宏任务
    console.log('3');               //                  i同步任务,输出3
    new Promise(function(resolve) { //                  j同步任务,输出3.1
        console.log('3.1');
        resolve();
    }).then(function() {            //                  k微任务,放入队列,插队输入4
        console.log('4')
    })
})

new Promise(function(resolve) {
    console.log('1.1');             //c同步任务,输出1.1
    resolve();
}).then(function() {
    console.log('2')                //d放入队列,微任务   g优先执行微任务,输出2
})

setTimeout(function() {             //e放入队列,宏任务   l执行队列中的宏任务
    console.log('5');               //                   m同步任务,输出5
    new Promise(function(resolve) {
        console.log('5.1');         //                   n放入队列,队列无任务,立即执行输出5.1
        resolve();
    }).then(function() {            //                   o放入队列,队列无任务,立即执行输出6
        console.log('6')
    })
})
                                    //f结束没有同步任务了,开始执行微任务队列

最后答案
1 1.2 2 3 3.1 4 5 5.1 6