基于Promise/async await解决setTimeout异步顺序执行及结果传递问题

看起来你遇到的核心问题有两个：一是async函数返回的Promise没有被正确等待，导致拿到的是pending状态的Promise而非实际结果，二是没有保证异步操作的串行执行，可能导致顺序混乱。另外你还需要实现1-100ms的随机延迟，这个在你当前的代码里也没处理好。我来一步步帮你修复这些问题：

问题根源拆解 #

1. async函数的返回值特性：所有async函数默认返回Promise，所以你直接result = double(...)时，result存储的是一个未完成的Promise，而不是计算后的数字。下一次调用double时把Promise传入，和数字做运算就会得到错误结果（比如NaN）。
2. 异步操作的并行执行：如果不等待上一次的setTimeout完成就调用下一次double，多个异步操作会并行触发，因为随机延迟的存在，执行顺序完全不可控。
3. 固定延迟不符合需求：你当前代码里的延迟是固定100ms，需要改成1-100ms的随机值。

完整解决方案代码 #

第一步：修复Promise化的函数（实现随机延迟） #

先把promisify函数改成支持随机延迟，同时给可选参数increase加默认值：

function promisify(number, increase = 0) {
  // 生成1-100ms的随机延迟
  const randomDelay = Math.floor(Math.random() * 100) + 1;
  return new Promise(resolve => {
    setTimeout(() => {
      const calculatedValue = number * 2 + increase;
      resolve(calculatedValue);
    }, randomDelay);
  });
}

第二步：简化async函数（可选） #

你的double函数其实可以直接复用promisify，因为async函数返回的就是Promise，没必要多一层await：

// 写法1：保持原async结构
async function double(number, increase = 0) {
  return await promisify(number, increase);
}

// 写法2：直接指向promisify（更简洁）
// const double = promisify;

第三步：串行执行5次调用（保证顺序与结果传递） #

要保证顺序和结果正确传递，必须把所有调用放在一个async函数里，用await依次等待每一次操作完成：

async function runSequentialCalls() {
  let currentResult;

  // 第一次调用：输入5，增量0
  currentResult = await double(5, 0);
  console.log(`第一次结果：${currentResult}`); // 预期输出10

  // 第二次调用：输入12，增量为上一次结果10
  currentResult = await double(12, currentResult);
  console.log(`第二次结果：${currentResult}`); // 预期输出34

  // 第三次调用：输入2，增量为上一次结果34
  currentResult = await double(2, currentResult);
  console.log(`第三次结果：${currentResult}`); // 预期输出38

  // 第四次调用：自定义输入，比如15，增量38
  currentResult = await double(15, currentResult);
  console.log(`第四次结果：${currentResult}`); // 预期输出68

  // 第五次调用：自定义输入，比如8，增量68
  currentResult = await double(8, currentResult);
  console.log(`第五次结果：${currentResult}`); // 预期输出84

  return currentResult;
}

// 执行整个序列
runSequentialCalls().catch(error => console.error('执行出错：', error));

备选方案：用Promise链式调用（不用async/await） #

如果你更习惯Promise的链式写法，也可以这样实现：

double(5, 0)
  .then(result => {
    console.log(`第一次结果：${result}`);
    return double(12, result);
  })
  .then(result => {
    console.log(`第二次结果：${result}`);
    return double(2, result);
  })
  .then(result => {
    console.log(`第三次结果：${result}`);
    return double(15, result);
  })
  .then(result => {
    console.log(`第四次结果：${result}`);
    return double(8, result);
  })
  .then(result => {
    console.log(`第五次结果：${result}`);
  })
  .catch(error => console.error('执行出错：', error));

为什么这样能解决问题？ #

• await的作用：await会暂停async函数的执行，直到右侧的Promise完成（resolve），此时拿到的是实际的计算结果，而不是Promise对象，这样就能正确传递给下一次调用。
• 串行执行：因为每次调用都等待上一次完成，所以5次异步操作会严格按照调用顺序执行，不会因为随机延迟导致输出顺序混乱。
• 随机延迟实现：Math.floor(Math.random() * 100) + 1会生成1到100之间的整数（Math.random()返回0-1的浮点数，乘100后是0-99.999，取整后是0-99，加1就是1-100）。

内容的提问来源于stack exchange，提问作者Laura Beatris