饥人谷Wiki

站点工具

用户工具

====== 差别 ======

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

两侧同时换到之前的修订记录 前一修订版
后一修订版 		前一修订版
后一修订版 两侧同时换到之后的修订记录
前端面试重点突破 [2021/12/22 17:48]
若愚 		前端面试重点突破 [2021/12/28 17:37]
若愚
行 1: 行 1:
-# 宏任务微任务 +- [宏任务与微任务](宏任务与微任务)
-> 考察事件循环、任务队列、和setTimeout、Promise结合，以输出结果顺序的方式来考察 +
- +
-**范例** [出处](https://www.nowcoder.com/discuss/448615?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack&subType=2) +
- +
-```javascript +
- +
-setTimeout(() => console.log(1), 0); +
-  +
-new Promise(resolve => { +
- console.log(2); +
- resolve(); +
-}).then(() => { +
-  console.log(3); +
-}); +
-  +
-console.log(4); +
-``` +
- +
-**范例** [出处](https://www.nowcoder.com/discuss/743668?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack&subType=2) +
-```javascript +
- +
-setTimeout(()=> console.log(1)) +
-  +
-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://www.nowcoder.com/discuss/697189?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack&subType=2) +
- +
-```javascript +
- +
-const p = new Promise((resolve, reject) => { +
-    console.log(1); +
-    setTimeout(() => { +
-        console.log(2); +
-    }) +
-    resolve(1); +
-}).then(res => { +
-    console.log(3); +
-}) +
-  +
-setTimeout(() => { +
-    console.log(4); +
-}) +
-  +
-console.log(5); +
-``` +
- +
-**范例** 来自[面经](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%82%E5%AE%9E%E4%B9%A0) 第5题 +
- +
-```javascript +
-async function async1(){ +
-    console.log('async1 start') +
-    await async2() +
-    console.log('async1 end') +
-} +
-  +
-async function async2(){ +
-    console.log('async2') +
-} +
-  +
-console.log('script start') +
-  +
-setTimeout(function(){ +
-    console.log('setTimeout') +
-},0) +
-  +
-async1() +
-  +
-new Promise(function(reslove){ +
-    console.log('promise1'); +
-    resolve() +
-}).then(function(){ +
-    console.log('promise2') +
-}) +
-  +
-console.log('script end') +
-``` +
- +
-** 范例 ** 来自[面经](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8218) +
- +
-```javascript +
-const pro = new Promise((resolve, reject) => { +
-const innerpro = new Promise((resolve, reject) => { +
-  setTimeout(() => { +
-    resolve(1); +
-  }, 0); +
-  console.log(2); +
-  resolve(3); +
-}); +
-innerpro.then(res => console.log(res)); +
-resolve(4); +
-console.log("pro"); +
-}) +
-pro.then(res => console.log(res)); +
-console.log("end"); ​ +
-``` +
- +
-** 范例 ** 来自[这里](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8223) +
- +
-```javascript +
-console.log('begin') +
-setTimeout(() => { +
-    console.log('setTimeout 1') +
-    Promise.resolve().then(() => { +
-        console.log('promise 1') +
-        setTimeout(() => { +
-            console.log('setTimeout2 between promise1&2') +
-        }) +
-    }).then(() => { +
-        console.log('promise 2') +
-    }) +
-}, 0) +
-console.log('end') +
-``` +
- +
-** 范例 **[题目出处](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8228) +
- +
-```javascript +
- +
-function arr(){ +
-    setTimeout(function(){      +
-        console.log('1');    +
-    },0)    +
-    async function async1(){     +
-        console.log('4');     +
-        await async2();     +
-        console.log('6');    +
-    }    +
-    async function async2(){     +
-        console.log('5');    +
-    }    +
-    async1();    +
-    new Promise(function(resolve,reject){     +
-        console.log('2');     +
-        resolve();    +
-    }).then(function(e2){     +
-        console.log('h');    +
-    })    +
-    console.log('3');   +
-} +
-``` +
- +
-** 范例5 ** [题目出处](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8237) +
-```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://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8244) +
-```javascript +
-console.log(1); +
-setTimeout(() => { +
- console.log(2); +
- Promise.resolve().then(() => { +
-  console.log(3) +
- }); +
-}); +
-new Promise((resolve, reject) => { +
- console.log(4) +
- resolve() +
-}).then(() => { +
- console.log(5); +
-}) +
-setTimeout(() => { +
- console.log(6); +
-}) +
-console.log(7); +
-``` +
- +
-** 范例** [题目出处](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8247) +
-```javascript +
-setTimeout(() => {              +
-  console.log(1)          +
-}, 0);          +
-new Promise((res)=>{ +
-  console.log(2);res() +
-}).then(()=>{ +
-  console.log(4) +
-})          +
-console.log(3) +
-``` +
- +
-** 范例** [题目出处](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8247) +
-```javascript +
-const a = () => {      +
-  new Promise((resolve) => {          +
-resolve(1)          +
-console.log('a')      +
-  }).then(() => {          +
-console.log('b')      +
-  })  +
-}  +
-a()  +
-console.log('c') +
-``` +
- +
-** 范例** [题目出处](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8247) +
-```javascript +
-new Promise((resolve, reject) => {      +
-  reject(1)  +
-}).catch(() => {      +
-  console.log(2);  +
-}).then(() => {      +
-  console.log(3)  +
-}, (v) => {  +
-  console.log(v)  +
-})  +
-console.log(4) +
-``` +
- +
-** 范例** [题目出处](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8249) +
-```javascript +
-async function async1() { +
-  console.log('async1 start'); +
-  await async2(); +
-  console.log('async1 end'); +
-} +
-async function async2() { +
-  console.log('async2 start'); +
-  return new Promise((resolve, reject) => { +
- resolve(); +
- console.log('async2 promise'); +
-  }) +
-} +
-console.log('script start'); +
-setTimeout(function() { +
-  console.log('setTimeout'); +
-}, 0);   +
-async1(); +
-new Promise(function(resolve) { +
-  console.log('promise1'); +
-  resolve(); +
-}).then(function() { +
-  console.log('promise2'); +
-}).then(function() { +
-  console.log('promise3'); +
-}); +
-console.log('script end') +
-``` +
- +
-** 范例** +
-```javascript +
-function app() { +
-      setTimeout(() => { +
-        console.log("1-1"); +
-        Promise.resolve().then(() => { +
-          console.log("2-1"); +
-        }); +
-      }); +
-      console.log("1-2"); +
-      Promise.resolve().then(() => { +
-        console.log("1-3"); +
-        setTimeout(() => { +
-          console.log("3-1"); +
-        }); +
-      }); +
-    } +
-    app(); +
-```+
若愚 · 2021/12/28 18:04 · 前端面试重点突破.txt
公众号 | 前端交流群 | 饥人谷版权所有 | 购买课程

页面工具