事件循环机制

事件循环机制

事件循环练习
由于js是单线程，为防止代码阻塞，将代码分为同步和异步，同步代码会直接放入执行栈中执行，异步代码（如setTimeout）放入宿主环境（浏览器，Node）中，时机到了（点击事件即点击后，setTimeout即时间结束后）以后将回调函数放入任务队列中，执行栈中的代码执行完后就会去任务队列中查看有无异步代码要执行。反复循环查看执行，这个过程就是事件循环。

js又把异步任务分为宏任务（由宿主环境发起，如script，事件，网络请求Ajax/Fetch，setTimeout()/setInterval()）和微任务（由JS引擎发起，如Promise，Promise本身同步，then/catch回调函数异步）

注意⚠️

• 排前面的 script 先执行，执行其内部的【同】，再执行其【微】，接着就轮到下一个大的宏，也就是执行下一个 script，【同】、【微】......顺序执行完后，再从头开始，看第一个 script 是否有需要执行的【宏】，再去下一个 script 中找 【宏】，等大家宏结束后，进入下一轮循环。
  

• async函数里面的属于同步代码，await后的代码属于异步微任务
  

Practice

1️⃣

1. console.log('A');·
2. setTimeout(() => console.log('B'), 0);
3. Promise.resolve().then(() => console.log('C'));
4. Promise.resolve().then(() => setTimeout(() => console.log('D'), 0));
5. console.log('E');

复制代码

点击查看答案

1. A → E → C → B → D

复制代码

2️⃣

1. const promise = new Promise((resolve, reject) => {
2. console.log(1);
3. console.log(2);
4. });
5. promise.then(() => {
6. console.log(3);
7. });
8. console.log(4);

复制代码

点击查看答案

1. 1 → 2 → 4

复制代码

3️⃣

1. async function async1() {
2.   console.log('1');
3.   await async2();
4.   console.log('2');
5. }
6. async function async2() { console.log('3'); }
7. setTimeout(() => console.log('4'), 0);
8. async1();
9. new Promise(resolve => {
10.   console.log('5');
11.   resolve();
12. }).then(() => console.log('6'));
13. console.log('7');

复制代码

点击查看答案

1. 1 → 3 → 5 → 7 → 2 → 6 → 4

复制代码

4️⃣

1. new Promise((resolve) => {
2.   console.log(1);
3.   resolve(3);
4.   Promise.resolve().then(() => {
5.     console.log(4);
6.   });
7. }).then((num) => {
8.   console.log(num);
9. });
11. setTimeout(() => {
12.   console.log(6);
13. });
15. Promise.resolve().then(() => {
16.   console.log(5);
17. });
18. console.log(2);

复制代码

点击查看答案

1. 1 → 2 → 4 → 3 → 5 → 6

复制代码

5️⃣

1. console.log('start');
2. setTimeout(() => {
3.   console.log('Timeout1');
4. }, 1000);
6. Promise.resolve().then(() => {
7.   console.log('Promise1');
8. });
10. Promise.resolve().then(() => {
11.   console.log('Promise2');
12.   setTimeout(() => {
13.     Promise.resolve().then(() => {
14.       console.log('Promise3');
15.     })
16.     console.log('Timeout2');
17.   }, 0);
18. });
19. console.log('end');

复制代码

点击查看答案

1. start → end → Promise1 → Promise2 → Timeout2 → Promise3 → Timeout1

复制代码

1. function app() {
2.   setTimeout(() => {
3.     console.log("1-1");3
4.     Promise.resolve().then(() => {
5.       console.log("2-1");5
6.     });
7.   });
8.   console.log("1-2"); 1
9.   Promise.resolve().then(() => {
10.     console.log("1-3"); 2
11.     setTimeout(() => {
12.       console.log("3-1"); 4
13.     });
14.   });
15. }

复制代码

点击查看答案

1. 1-2 → 1-3 → 1-1 → 3-1 → 2-1

复制代码

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除