1.概念:宏任务(macrotask )和微任务(microtask ) 表示异步任务的两种分类。常见宏任务:I/O 、setTimeout、setInterval;微任务:Promise.then catch finally、process.nextTick
在挂起任务时,JS 引擎会将 所有任务 按照类别分到这两个队列中,
首先在 macrotask 的队列(这个队列也被叫做 task queue)中取出第一个任务,执行完毕后取出 microtask 队列中的所有任务顺序执行;
之后再取 macrotask 任务,周而复始,直至两个队列的任务都取完。
2.代码
2.1 基本执行顺序
// 主线程(外层宏) - 微 - 宏 // 1 1.1 - 2 - 3 setTimeout(() => { console.log(‘3‘) }, 0) console.log(‘1‘); new Promise((resolve) => { console.log(‘1.1‘); resolve() }).then(() => { console.log(‘2‘); }).then(()=>{ console.log(‘2.1‘) })
setTimeout(_ => console.log(4)) new Promise(resolve => { resolve() console.log(1) }).then(_ => { console.log(3) }) console.log(2)
2.2 深度解析案例 :单组依次执行
console.log(‘1‘); setTimeout(function() { console.log(‘3‘); new Promise(function(resolve) { console.log(‘3.1‘); resolve(); }).then(function() { console.log(‘4‘) }) }) new Promise(function(resolve) { console.log(‘1.1‘); resolve(); }).then(function() { console.log(‘2‘) }) setTimeout(function() { console.log(‘5‘); new Promise(function(resolve) { console.log(‘5.1‘); resolve(); }).then(function() { console.log(‘6‘) }) })
2.3 promise ES5实现
function MyPromise(fn) { var value = null, callbacks = []; this.then = function (onFulfilled) { callbacks.push(onFulfilled); return this; }; function resolve(value) { setTimeout(function () { callbacks.forEach(function (callback) { callback(value); }); },0) } fn(resolve); } function test() { return new MyPromise(function(resolve) { console.log(‘1‘); resolve(); }) } test().then(function(resolve) { console.log(‘2‘); }).then(function(resolve) { console.log(‘3‘); });
3.相关文章
原文地址:https://www.cnblogs.com/justSmile2/p/11185045.html
时间: 2024-10-11 17:46:18