宏任务和微任务
时间: 2023-11-02 14:08:59 浏览: 74
JS事件循环机制event loop宏任务微任务原理解析
在 JavaScript 中,宏任务和微任务都是异步操作的执行单元。
宏任务包括:script(整体代码)、setTimeout、setInterval、I/O 操作、UI 渲染等。当执行完一个宏任务后,会清空所有微任务队列,然后执行下一个宏任务。
微任务包括:Promise.then、Promise.catch、Promise.finally、MutationObserver 等。当一个微任务队列中的所有任务都执行完毕后,会立即执行下一个宏任务。如果在执行微任务过程中又产生了新的微任务,则会加入到当前微任务队列的末尾,等待下一次执行。
举个例子:
```javascript
console.log('start');
setTimeout(function () {
console.log('setTimeout');
}, 0);
Promise.resolve()
.then(function () {
console.log('promise1');
})
.then(function () {
console.log('promise2');
});
console.log('end');
```
输出的结果为:
```
start
end
promise1
promise2
setTimeout
```
因为 setTimeout 是一个宏任务,所以会先执行整个 script,输出 start 和 end,然后将 setTimeout 加入到宏任务队列中。而 Promise.then 是一个微任务,所以会在当前宏任务执行完毕后立即执行,输出 promise1 和 promise2。最后执行宏任务队列中的 setTimeout,输出 setTimeout。
阅读全文