JavaScript 异步编程挑战指南：从基础到高级实践

本文基于一个优秀的 JavaScript 代码挑战项目中的异步编程部分，系统性地讲解了 JavaScript 异步编程的各种技术实现方式。无论你是刚接触异步编程的新手，还是希望巩固知识的中级开发者，这篇文章都将为你提供清晰的学习路径。

基础篇：定时器与回调

1. 延迟输出基础

setTimeout 是 JavaScript 中最基础的异步函数之一，它允许我们在指定时间后执行代码：

// 三种等效的实现方式
setTimeout(function(text) { console.log(text); }, 3000, "Hello, World");
setTimeout(() => console.log("Hello, World"), 3000);
setTimeout(console.log, 3000, "Hello, World");

关键点：

• 第一个参数是回调函数
• 第二个参数是延迟时间（毫秒）
• 后续参数将作为回调函数的参数传入

2. 回调函数执行

理解回调函数是掌握 JavaScript 异步编程的第一步：

function callbackExec(callback) {
  if (typeof callback === "function") {
    setTimeout(() => {
      callback();
      console.log("回调函数在2秒后执行");
    }, 2000);
  }
}

进阶篇：循环与定时

3. 循环延迟输出

实现数字1-10每秒输出一个的几种方法：

// 方法1：利用闭包
for (let i = 1; i <= 10; i++) {
  setTimeout(() => console.log(i), i * 1000);
}

// 方法2：递归实现
(function displayWithDelay(i) {
  console.log(i);
  if (i !== 10) setTimeout(displayWithDelay, 1000, ++i);
})(1);

4. setInterval 实现

setInterval 提供了另一种循环执行的方式：

let i = 1;
const intervalId = setInterval(() => {
  console.log(i++);
  if (i === 11) clearInterval(intervalId);
}, 1000);

实战篇：构建实用工具

6. 可控制的自增计时器

构建一个可以随时启动和停止的计时器工具：

function timer(init = 0, step = 1) {
  let intervalId;
  let count = init;

  function startTimer() {
    if (!intervalId) {
      intervalId = setInterval(() => {
        console.log(count);
        count += step;
      }, 1000);
    }
  }

  function stopTimer() {
    clearInterval(intervalId);
    intervalId = null;
  }

  return { startTimer, stopTimer };
}

高级篇：异步流程控制

7. 顺序执行异步函数

使用回调实现异步函数的顺序执行：

function callbackManager(asyncFuncs) {
  function nextFuncExecutor() {
    const nextAsyncFunc = asyncFuncs.shift();
    if (nextAsyncFunc) {
      nextAsyncFunc(nextFuncExecutor);
    }
  }
  nextFuncExecutor();
}

8. 并行执行异步函数

并行执行但保持结果顺序：

function asyncParallel(asyncFuncArr, callback) {
  const resultArr = new Array(asyncFuncArr.length);
  let resultCounter = 0;

  asyncFuncArr.forEach((asyncFn, index) => {
    asyncFn((value) => {
      resultArr[index] = value;
      resultCounter++;
      if (resultCounter >= asyncFuncArr.length) {
        callback(resultArr);
      }
    });
  });
}

Promise 与 async/await 实践

9. Promise 链式调用

asyncFunc1()
  .then(asyncFunc2)
  .then(asyncFunc3)
  .catch(() => console.log("某个异步函数出错"));

10. async/await 实现

async function executor() {
  try {
    await asyncFunc1();
    await asyncFunc2();
    await asyncFunc3();
  } catch {
    console.log("出错");
  }
}();

高级应用场景

16. 带重试机制的请求工具

function requestManager(url, attempts = 3) {
  return new Promise(async (resolve, reject) => {
    for (let i = 0; i < attempts; i++) {
      try {
        const response = await fetch(url);
        resolve(response);
        break;
      } catch (err) {
        if (i === attempts - 1) reject(err);
        await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
      }
    }
  });
}

18. 使用生成器遍历嵌套对象

function* objectReader(obj) {
  for (let key in obj) {
    if (typeof obj[key] === "object") {
      yield* objectReader(obj[key]);
    } else {
      yield obj[key];
    }
  }
}

通过本文的系统学习，你应该已经掌握了从基础到高级的 JavaScript 异步编程技术。这些技术在真实项目中有广泛应用，理解它们将大大提升你的开发能力。建议结合实际项目需求，选择最适合的异步处理方案。