====== 差别 ======
这里会显示出您选择的修订版和当前版本之间的差别。
两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 | ||
前端面试重点突破 [2021/12/22 17:48] 若愚 |
前端面试重点突破 [2021/12/28 18:04] (当前版本) 若愚 |
||
---|---|---|---|
行 1: | 行 1: | ||
- | # 宏任务微任务 | + | - [Promise与微任务,你真的懂吗?](https:// |
- | > 考察事件循环、任务队列、和setTimeout、Promise结合,以输出结果顺序的方式来考察 | + | - [微任务终极考验,一文讲解async/ |
+ | - [宏任务与微任务大厂面试题集合](宏任务与微任务) | ||
- | **范例** [出处](https:// | ||
- | |||
- | ```javascript | ||
- | |||
- | setTimeout(() => console.log(1), | ||
- | |||
- | new Promise(resolve => { | ||
- | | ||
- | | ||
- | }).then(() => { | ||
- | console.log(3); | ||
- | }); | ||
- | |||
- | console.log(4); | ||
- | ``` | ||
- | |||
- | **范例** [出处](https:// | ||
- | ```javascript | ||
- | |||
- | setTimeout(()=> | ||
- | |||
- | new Promise(resolve => { | ||
- | resolve() | ||
- | console.log(2) | ||
- | }).then(_ => { | ||
- | console.log(3) | ||
- | Promise.resolve().then(_ => { | ||
- | console.log(4) | ||
- | }).then(_ => { | ||
- | Promise.resolve().then(_ => { | ||
- | console.log(5) | ||
- | }) | ||
- | }) | ||
- | }) | ||
- | |||
- | console.log(6) | ||
- | ``` | ||
- | |||
- | ** 范例 ** [出处](https:// | ||
- | |||
- | ```javascript | ||
- | |||
- | const p = new Promise((resolve, | ||
- | console.log(1); | ||
- | setTimeout(() => { | ||
- | console.log(2); | ||
- | }) | ||
- | resolve(1); | ||
- | }).then(res => { | ||
- | console.log(3); | ||
- | }) | ||
- | |||
- | setTimeout(() => { | ||
- | console.log(4); | ||
- | }) | ||
- | |||
- | console.log(5); | ||
- | ``` | ||
- | |||
- | **范例** 来自[面经](https:// | ||
- | |||
- | ```javascript | ||
- | async function async1(){ | ||
- | console.log(' | ||
- | await async2() | ||
- | console.log(' | ||
- | } | ||
- | |||
- | async function async2(){ | ||
- | console.log(' | ||
- | } | ||
- | |||
- | console.log(' | ||
- | |||
- | setTimeout(function(){ | ||
- | console.log(' | ||
- | },0) | ||
- | |||
- | async1() | ||
- | |||
- | new Promise(function(reslove){ | ||
- | console.log(' | ||
- | resolve() | ||
- | }).then(function(){ | ||
- | console.log(' | ||
- | }) | ||
- | |||
- | console.log(' | ||
- | ``` | ||
- | |||
- | ** 范例 ** 来自[面经](https:// | ||
- | |||
- | ```javascript | ||
- | const pro = new Promise((resolve, | ||
- | const innerpro = new Promise((resolve, | ||
- | setTimeout(() => { | ||
- | resolve(1); | ||
- | }, 0); | ||
- | console.log(2); | ||
- | resolve(3); | ||
- | }); | ||
- | innerpro.then(res => console.log(res)); | ||
- | resolve(4); | ||
- | console.log(" | ||
- | }) | ||
- | pro.then(res => console.log(res)); | ||
- | console.log(" | ||
- | ``` | ||
- | |||
- | ** 范例 ** 来自[这里](https:// | ||
- | |||
- | ```javascript | ||
- | console.log(' | ||
- | setTimeout(() => { | ||
- | console.log(' | ||
- | Promise.resolve().then(() => { | ||
- | console.log(' | ||
- | setTimeout(() => { | ||
- | console.log(' | ||
- | }) | ||
- | }).then(() => { | ||
- | console.log(' | ||
- | }) | ||
- | }, 0) | ||
- | console.log(' | ||
- | ``` | ||
- | |||
- | ** 范例 **[题目出处](https:// | ||
- | |||
- | ```javascript | ||
- | |||
- | function arr(){ | ||
- | setTimeout(function(){ | ||
- | console.log(' | ||
- | },0) | ||
- | async function async1(){ | ||
- | console.log(' | ||
- | await async2(); | ||
- | console.log(' | ||
- | } | ||
- | async function async2(){ | ||
- | console.log(' | ||
- | } | ||
- | async1(); | ||
- | new Promise(function(resolve, | ||
- | console.log(' | ||
- | resolve(); | ||
- | }).then(function(e2){ | ||
- | console.log(' | ||
- | }) | ||
- | console.log(' | ||
- | } | ||
- | ``` | ||
- | |||
- | ** 范例5 ** [题目出处](https:// | ||
- | ```javascript | ||
- | setTimeout(_ => console.log(1)) | ||
- | new Promise(resolve => { | ||
- | resolve() | ||
- | console.log(2) | ||
- | }).then(_ => { | ||
- | setTimeout(_ => console.log(3)) | ||
- | console.log(4) | ||
- | Promise.resolve().then(_ => { | ||
- | console.log(5) | ||
- | }).then(_ => { | ||
- | Promise.resolve().then(_ => { | ||
- | console.log(6) | ||
- | }) | ||
- | }) | ||
- | }) | ||
- | console.log(7) | ||
- | ``` | ||
- | |||
- | |||
- | **范例** [题目出处](https:// | ||
- | ```javascript | ||
- | console.log(1); | ||
- | setTimeout(() => { | ||
- | | ||
- | | ||
- | console.log(3) | ||
- | }); | ||
- | }); | ||
- | new Promise((resolve, | ||
- | | ||
- | | ||
- | }).then(() => { | ||
- | | ||
- | }) | ||
- | setTimeout(() => { | ||
- | | ||
- | }) | ||
- | console.log(7); | ||
- | ``` | ||
- | |||
- | ** 范例** [题目出处](https:// | ||
- | ```javascript | ||
- | setTimeout(() => { | ||
- | console.log(1) | ||
- | }, 0); | ||
- | new Promise((res)=> | ||
- | console.log(2); | ||
- | }).then(()=> | ||
- | console.log(4) | ||
- | }) | ||
- | console.log(3) | ||
- | ``` | ||
- | |||
- | ** 范例** [题目出处](https:// | ||
- | ```javascript | ||
- | const a = () => { | ||
- | new Promise((resolve) => { | ||
- | resolve(1) | ||
- | console.log(' | ||
- | }).then(() => { | ||
- | console.log(' | ||
- | }) | ||
- | } | ||
- | a() | ||
- | console.log(' | ||
- | ``` | ||
- | |||
- | ** 范例** [题目出处](https:// | ||
- | ```javascript | ||
- | new Promise((resolve, | ||
- | reject(1) | ||
- | }).catch(() => { | ||
- | console.log(2); | ||
- | }).then(() => { | ||
- | console.log(3) | ||
- | }, (v) => { | ||
- | console.log(v) | ||
- | }) | ||
- | console.log(4) | ||
- | ``` | ||
- | |||
- | ** 范例** [题目出处](https:// | ||
- | ```javascript | ||
- | async function async1() { | ||
- | console.log(' | ||
- | await async2(); | ||
- | console.log(' | ||
- | } | ||
- | async function async2() { | ||
- | console.log(' | ||
- | return new Promise((resolve, | ||
- | | ||
- | | ||
- | }) | ||
- | } | ||
- | console.log(' | ||
- | setTimeout(function() { | ||
- | console.log(' | ||
- | }, 0); | ||
- | async1(); | ||
- | new Promise(function(resolve) { | ||
- | console.log(' | ||
- | resolve(); | ||
- | }).then(function() { | ||
- | console.log(' | ||
- | }).then(function() { | ||
- | console.log(' | ||
- | }); | ||
- | console.log(' | ||
- | ``` | ||
- | |||
- | ** 范例** | ||
- | ```javascript | ||
- | function app() { | ||
- | setTimeout(() => { | ||
- | console.log(" | ||
- | Promise.resolve().then(() => { | ||
- | console.log(" | ||
- | }); | ||
- | }); | ||
- | console.log(" | ||
- | Promise.resolve().then(() => { | ||
- | console.log(" | ||
- | setTimeout(() => { | ||
- | console.log(" | ||
- | }); | ||
- | }); | ||
- | } | ||
- | app(); | ||
- | ` | ||
- | `` |