如何根据用户指定的选项数组，按顺序执行对应带回调的函数？

这个需求太常见了——本质就是要让带回调的异步函数严格串行执行，必须等前一个的回调跑完，再启动下一个。我给你整理了几种不同风格的实现方式，你可以根据项目环境灵活选择：

方法1：递归遍历数组（纯回调风格，适合老项目） #

这是最基础的实现思路，用递归的方式逐个触发函数，前一个函数的回调就是下一个函数的执行入口：

// 先建立选项和对应函数的映射关系
const functionMap = {
  option1: handleOption1,
  option4: handleOption4,
  option2: handleOption2
};

// 核心的串行执行函数
function runSequence(options, currentIndex = 0) {
  // 所有函数执行完毕，终止递归
  if (currentIndex >= options.length) return;

  const currentOption = options[currentIndex];
  const targetFunc = functionMap[currentOption];

  // 执行当前函数，在它的回调里递归触发下一个函数
  targetFunc(() => {
    console.log(`${currentOption} 执行完成，开始下一个`);
    runSequence(options, currentIndex + 1);
  });
}

// 调用示例
const userSelectedOptions = ['option1', 'option4', 'option2'];
runSequence(userSelectedOptions);

这种写法不需要任何额外依赖，完全基于原生回调逻辑，适合维护老项目时使用。

方法2：Promise封装 + async/await（现代JS首选） #

回调嵌套多了容易陷入“回调地狱”，把带回调的函数封装成Promise，再用async/await让异步代码像同步代码一样好读：

// 工具函数：把带回调的异步函数转换成Promise
function promisify(callbackBasedFunc) {
  return new Promise((resolve) => {
    // 假设你的函数回调是无参数的，如果有结果参数，可以改成 func((result) => resolve(result))
    callbackBasedFunc(resolve);
  });
}

// 建立映射（这次是Promise化后的函数）
const functionMap = {
  option1: promisify(handleOption1),
  option4: promisify(handleOption4),
  option2: promisify(handleOption2)
};

// 串行执行的async函数
async function runSequence(options) {
  for (const option of options) {
    await functionMap[option];
    console.log(`${option} 执行完成`);
  }
}

// 调用示例（记得处理可能的错误）
const userSelectedOptions = ['option1', 'option4', 'option2'];
runSequence(userSelectedOptions)
  .catch(error => console.error('执行过程出错:', error));

这种写法逻辑清晰，可读性极强，是现代JavaScript项目的首选方案，还能方便地加入错误处理逻辑。

方法3：Promise链式调用（兼容ES6但不支持async/await的环境） #

如果你的运行环境支持ES6但还没升级到支持async/await，可以用reduce方法构建Promise链来实现串行：

// 复用上面的promisify工具函数和functionMap
const functionMap = {
  option1: promisify(handleOption1),
  option4: promisify(handleOption4),
  option2: promisify(handleOption2)
};

const userSelectedOptions = ['option1', 'option4', 'option2'];

// 用reduce构建串行Promise链
userSelectedOptions.reduce((previousPromise, currentOption) => {
  return previousPromise.then(() => {
    return functionMap[currentOption].then(() => {
      console.log(`${currentOption} 执行完成`);
    });
  });
}, Promise.resolve()) // 初始Promise，立刻进入就绪状态
.catch(error => console.error('执行出错:', error));

这种写法同样基于Promise，不需要async/await语法支持，适合过渡阶段的项目。

注意事项 #

• 确保你的handleOptionX函数确实是在异步操作完成后才调用回调（比如AJAX请求结束、定时器触发、文件读写完成等），否则会导致顺序错乱。
• 如果函数执行可能出错，记得在Promise或async函数中加入错误捕获逻辑，避免整个执行链中断。

内容的提问来源于stack exchange，提问作者James Payne