JS 异步与事件循环面试题（中高级）

NOTE
本文包含 20+ 道 JS 异步编程面试题，难度标注：⭐ 基础 · ⭐⭐ 进阶 · ⭐⭐⭐ 高级 · 🔥 高频必考

事件循环 (Event Loop)#

Q1: 什么是 Event Loop？⭐⭐ 🔥#

答：

Event Loop 是 JavaScript 的执行机制，用于协调单线程与异步操作的关系。

1
┌─────────────────────────────────────┐
2
│           执行栈 (Call Stack)        │
3
└───────────────────┬─────────────────┘
4
                    │
5
                    ▼
6
┌─────────────────────────────────────┐
7
│      微任务队列 (Microtask Queue)    │
8
│  Promise.then/catch/finally        │
9
│  MutationObserver                  │
10
│  queueMicrotask()                  │
11
└───────────────────┬─────────────────┘
12
                    │ 微任务清空后
13
                    ▼
14
┌─────────────────────────────────────┐
15
│      宏任务队列 (Macrotask Queue)    │
16
│  setTimeout/setInterval            │
17
│  setImmediate (Node)               │
18
│  I/O、UI 渲染                       │
19
│  requestAnimationFrame             │
20
└─────────────────────────────────────┘

执行顺序：

执行同步代码（调用栈）
清空微任务队列
执行一个宏任务
重复步骤 2-3

Q2: 宏任务和微任务有哪些？⭐ 🔥#

答：

类型	任务
微任务	`Promise.then/catch/finally`
	`MutationObserver`
	`queueMicrotask()`
	`process.nextTick` (Node，优先级更高)
宏任务	`setTimeout`
	`setInterval`
	`setImmediate` (Node)
	I/O 操作
	UI 渲染
	`MessageChannel`
	`postMessage`

1
console.log('1'); // 同步
2

3
setTimeout(() => {
4
  console.log('2'); // 宏任务
5
}, 0);
6

7
Promise.resolve().then(() => {
8
  console.log('3'); // 微任务
9
});
10

11
console.log('4'); // 同步
12

13
// 输出：1 4 3 2

Q3: 经典 Event Loop 输出题 ⭐⭐⭐ 🔥#

1
// 题目 1
2
console.log('script start');
3

4
setTimeout(function() {
5
  console.log('setTimeout');
6
}, 0);
7

8
new Promise(function(resolve) {
9
  console.log('promise executor'); // 同步执行
10
  resolve();
11
}).then(function() {
12
  console.log('promise then');
13
});
14

15
console.log('script end');
16

17
// 输出顺序：
18
// script start
19
// promise executor
20
// script end
21
// promise then
22
// setTimeout

1
// 题目 2：嵌套 Promise
2
Promise.resolve().then(() => {
3
  console.log('then1');
4
  Promise.resolve().then(() => {
5
    console.log('then1-1');
6
  });
7
}).then(() => {
8
  console.log('then2');
9
});
10

11
// 输出：then1 -> then1-1 -> then2

1
// 题目 3：async/await 与 Promise
2
async function async1() {
3
  console.log('async1 start');
4
  await async2();
5
  console.log('async1 end');
6
}
7

8
async function async2() {
9
  console.log('async2');
10
}
11

12
console.log('script start');
13

14
setTimeout(function() {
15
  console.log('setTimeout');
16
}, 0);
17

18
async1();
19

20
new Promise(function(resolve) {
21
  console.log('promise1');
22
  resolve();
23
}).then(function() {
24
  console.log('promise2');
25
});
26

27
console.log('script end');
28

29
// 输出：
30
// script start
31
// async1 start
32
// async2
33
// promise1
34
// script end
35
// async1 end
36
// promise2
37
// setTimeout

Q4: Node.js 的 Event Loop 和浏览器有什么不同？⭐⭐⭐#

答：

Node.js 的 Event Loop 分为 6 个阶段：

1
   ┌───────────────────────────┐
2
┌─>│           timers          │  setTimeout/setInterval
3
│  └─────────────┬─────────────┘
4
│  ┌─────────────┴─────────────┐
5
│  │     pending callbacks     │  系统操作回调
6
│  └─────────────┬─────────────┘
7
│  ┌─────────────┴─────────────┐
8
│  │       idle, prepare       │  内部使用
9
│  └─────────────┬─────────────┘
10
│  ┌─────────────┴─────────────┐
11
│  │           poll            │  I/O 回调
12
│  └─────────────┬─────────────┘
13
│  ┌─────────────┴─────────────┐
14
│  │           check           │  setImmediate
15
│  └─────────────┬─────────────┘
16
│  ┌─────────────┴─────────────┐
17
│  │      close callbacks      │  close 事件
18
│  └───────────────────────────┘

1
// Node.js 中的执行顺序
2
setImmediate(() => console.log('setImmediate'));
3
setTimeout(() => console.log('setTimeout'), 0);
4

5
// 不确定顺序（取决于进入 Event Loop 的时间）
6

7
// 在 I/O 回调中，setImmediate 总是先执行
8
const fs = require('fs');
9
fs.readFile(__filename, () => {
10
  setTimeout(() => console.log('setTimeout'), 0);
11
  setImmediate(() => console.log('setImmediate'));
12
});
13
// 输出：setImmediate -> setTimeout

Promise#

Q5: Promise 有哪几种状态？⭐ 🔥#

答：

状态	说明
`pending`	进行中，初始状态
`fulfilled`	已成功
`rejected`	已失败

1
// 状态一旦改变就不可逆
2
const p = new Promise((resolve, reject) => {
3
  resolve('success');  // pending -> fulfilled
4
  reject('error');     // 无效，状态已确定
5
});
6

7
p.then(v => console.log(v)); // 'success'

Q6: Promise 的常用方法？⭐⭐ 🔥#

答：

1
// 1. then/catch/finally
2
promise
3
  .then(value => { /* 成功 */ })
4
  .catch(error => { /* 失败 */ })
5
  .finally(() => { /* 总是执行 */ });
6

7
// 2. 静态方法
8
Promise.resolve(value);      // 返回成功的 Promise
9
Promise.reject(error);       // 返回失败的 Promise
10

11
// 3. 并发处理
12
Promise.all([p1, p2, p3])
13
  .then(results => {})       // 全部成功才成功
14
  .catch(err => {});         // 任一失败就失败
15

16
Promise.allSettled([p1, p2]) // ES2020
17
  .then(results => {
18
    // [{status: 'fulfilled', value}, {status: 'rejected', reason}]
19
  });
20

21
Promise.race([p1, p2])       // 第一个完成的结果
22
  .then(result => {});
23

24
Promise.any([p1, p2])        // ES2021，第一个成功的结果
25
  .then(value => {});

Q7: 如何实现 Promise.all？⭐⭐⭐#

1
function promiseAll(promises) {
2
  return new Promise((resolve, reject) => {
3
    const results = [];
4
    let count = 0;
5
    const len = promises.length;
6

7
    if (len === 0) {
8
      resolve([]);
9
      return;
10
    }
11

12
    promises.forEach((promise, index) => {
13
      Promise.resolve(promise).then(value => {
14
        results[index] = value;
15
        count++;
16
        if (count === len) {
17
          resolve(results);
18
        }
19
      }).catch(reject);
20
    });
21
  });
22
}
23

24
// 测试
25
promiseAll([
26
  Promise.resolve(1),
27
  Promise.resolve(2),
28
  3 // 非 Promise 也可以
29
]).then(console.log); // [1, 2, 3]

Q8: Promise 链式调用的原理？⭐⭐#

1
// then 返回新的 Promise
2
promise
3
  .then(value => {
4
    return value * 2;        // 返回普通值，下一个 then 收到 2
5
  })
6
  .then(value => {
7
    return Promise.resolve(value * 2); // 返回 Promise
8
  })
9
  .then(value => {
10
    console.log(value);      // 4
11
    throw new Error('error'); // 抛出错误
12
  })
13
  .catch(err => {
14
    console.log('caught:', err.message);
15
    return 'recovered';      // 恢复，下一个 then 收到
16
  })
17
  .then(value => {
18
    console.log(value);      // 'recovered'
19
  });

async/await#

Q9: async/await 的原理？⭐⭐ 🔥#

答：

async/await 是 Generator + Promise 的语法糖。

1
// async 函数总是返回 Promise
2
async function fn() {
3
  return 1;
4
}
5
fn().then(v => console.log(v)); // 1
6

7
// await 暂停执行，等待 Promise 完成
8
async function fetchData() {
9
  const res = await fetch(url); // 暂停，等待 Promise
10
  const data = await res.json();
11
  return data;
12
}
13

14
// 等价于
15
function fetchData() {
16
  return fetch(url)
17
    .then(res => res.json())
18
    .then(data => data);
19
}

Q10: async/await 错误处理？⭐⭐#

1
// 方式1：try/catch
2
async function fn() {
3
  try {
4
    const result = await somePromise();
5
    return result;
6
  } catch (error) {
7
    console.error('Error:', error);
8
    // 可以选择重新抛出或返回默认值
9
    throw error;
10
  } finally {
11
    // 清理工作
12
  }
13
}
14

15
// 方式2：.catch()
16
async function fn() {
17
  const result = await somePromise().catch(err => {
18
    console.error(err);
19
    return null; // 返回默认值
20
  });
21

22
  if (!result) return; // 处理错误情况
23
}
24

25
// 方式3：统一处理
26
const [err, data] = await to(somePromise());
27
function to(promise) {
28
  return promise
29
    .then(data => [null, data])
30
    .catch(err => [err, null]);
31
}

Q11: 串行 vs 并行执行 ⭐⭐ 🔥#

1
// ❌ 串行执行（慢）
2
async function serial() {
3
  const a = await fetchA(); // 等待 A 完成
4
  const b = await fetchB(); // 再等待 B
5
  return [a, b];
6
}
7
// 总时间 = A时间 + B时间
8

9
// ✅ 并行执行（快）
10
async function parallel() {
11
  const [a, b] = await Promise.all([
12
    fetchA(),
13
    fetchB()
14
  ]);
15
  return [a, b];
16
}
17
// 总时间 = max(A时间, B时间)
18

19
// ✅ 并行 + 错误隔离
20
async function parallelSafe() {
21
  const [a, b] = await Promise.allSettled([
22
    fetchA(),
23
    fetchB()
24
  ]);
25

26
  const resultA = a.status === 'fulfilled' ? a.value : null;
27
  const resultB = b.status === 'fulfilled' ? b.value : null;
28

29
  return [resultA, resultB];
30
}

Generator#

Q12: 什么是 Generator？⭐⭐#

答：

Generator 是可以暂停和恢复执行的函数。

1
// 定义
2
function* generator() {
3
  console.log('start');
4
  yield 1;
5
  console.log('resume 1');
6
  yield 2;
7
  console.log('resume 2');
8
  return 3;
9
}
10

11
// 使用
12
const gen = generator();
13
gen.next(); // { value: 1, done: false }
14
gen.next(); // { value: 2, done: false }
15
gen.next(); // { value: 3, done: true }
16

17
// 应用场景：惰性求值
18
function* idMaker() {
19
  let index = 0;
20
  while (true) {
21
    yield index++;
22
  }
23
}
24
const ids = idMaker();
25
ids.next().value; // 0
26
ids.next().value; // 1
27
// 无限序列，按需生成
28

29
// 应用场景：异步流程控制（async/await 之前）
30
function run(gen) {
31
  const it = gen();
32

33
  function step(result) {
34
    if (result.done) return Promise.resolve(result.value);
35

36
    return Promise.resolve(result.value)
37
      .then(value => step(it.next(value)))
38
      .catch(err => step(it.throw(err)));
39
  }
40

41
  return step(it.next());
42
}

实战题#

Q13: 实现 sleep 函数 ⭐#

1
// Promise 版本
2
function sleep(ms) {
3
  return new Promise(resolve => setTimeout(resolve, ms));
4
}
5

6
// 使用
7
async function fn() {
8
  console.log('start');
9
  await sleep(1000);
10
  console.log('after 1s');
11
}

Q14: 实现并发控制器 ⭐⭐⭐ 🔥#

1
// 限制同时执行的异步任务数量
2
function concurrentLimit(tasks, limit) {
3
  return new Promise((resolve, reject) => {
4
    const results = [];
5
    const running = new Set();
6
    let index = 0;
7

8
    function run() {
9
      while (index < tasks.length && running.size < limit) {
10
        const i = index++;
11
        const task = tasks[i];
12

13
        const promise = Promise.resolve(task())
14
          .then(result => {
15
            running.delete(promise);
16
            results[i] = { status: 'fulfilled', value: result };
17
            run(); // 继续执行下一个
18
          })
19
          .catch(error => {
20
            running.delete(promise);
21
            results[i] = { status: 'rejected', reason: error };
22
            run();
23
          });
24

25
        running.add(promise);
26
      }
27

28
      if (running.size === 0 && index >= tasks.length) {
29
        resolve(results);
30
      }
31
    }
32

33
    run();
34
  });
35
}
36

37
// 使用
38
const tasks = [
39
  () => fetch('/api/1'),
40
  () => fetch('/api/2'),
41
  () => fetch('/api/3'),
42
  () => fetch('/api/4'),
43
  () => fetch('/api/5'),
44
];
45

46
concurrentLimit(tasks, 2).then(results => {
47
  console.log(results);
48
});

Q15: 实现防抖和节流 ⭐⭐ 🔥#

1
// 防抖：事件停止触发 n 秒后执行
2
function debounce(fn, delay) {
3
  let timer = null;
4

5
  return function(...args) {
6
    clearTimeout(timer);
7
    timer = setTimeout(() => {
8
      fn.apply(this, args);
9
    }, delay);
10
  };
11
}
12

13
// 节流：每 n 秒最多执行一次
14
function throttle(fn, interval) {
15
  let lastTime = 0;
16

17
  return function(...args) {
18
    const now = Date.now();
19

20
    if (now - lastTime >= interval) {
21
      lastTime = now;
22
      fn.apply(this, args);
23
    }
24
  };
25
}
26

27
// 节流（定时器版）
28
function throttleTimer(fn, interval) {
29
  let timer = null;
30

31
  return function(...args) {
32
    if (timer) return;
33

34
    timer = setTimeout(() => {
35
      fn.apply(this, args);
36
      timer = null;
37
    }, interval);
38
  };
39
}

复习卡片#

1
// Event Loop 执行顺序
2
// 同步代码 -> 微任务（全部）-> 宏任务（一个）-> 微任务 -> ...
3

4
// 微任务
5
Promise.then/catch/finally
6
MutationObserver
7
queueMicrotask()
8

9
// 宏任务
10
setTimeout / setInterval
11
setImmediate (Node)
12
I/O / UI 渲染
13

14
// async/await 本质
15
// async 函数返回 Promise
16
// await 暂停执行，让出主线程
17

18
// 并行 vs 串行
19
// 串行：await a; await b;
20
// 并行：await Promise.all([a, b]);

概念	关键点
Event Loop	协调单线程与异步的机制
微任务	Promise.then，优先级高
宏任务	setTimeout，优先级低
async/await	Generator + Promise 语法糖
Promise.all	全部成功才成功
Promise.race	第一个完成的结果

TIP
下一篇：Vue 框架面试题
涵盖 Vue 响应式原理、虚拟 DOM、Diff 算法、生命周期、组件通信等核心知识点。