如何在不同JavaScript函数中正确串联Promise以实现顺序执行

嘿，我来帮你梳理下为什么你的playAllSequentially没按预期工作，以及怎么修复它！

核心问题分析 #

你当前的代码有几个关键问题：

1. play1/play2没有返回Promise链：这两个函数内部虽然写了Promise逻辑，但没有把这个Promise返回出去。所以当你在playAllSequentially里用.then(() => play1())时，JS会认为play1是个同步函数，执行完就立刻跳到下一个.then(() => play2())，完全不会等待A、B的操作完成。
2. play2里的then写法错误：你写的.then(() => put('C'), 1000)是把1000当成了then的第二个参数（拒绝回调函数），这完全不符合语法，根本不会起到延迟的作用。
3. put函数没有处理异步延迟：如果你的delay是异步操作（比如基于setTimeout），那put里的操作不会被Promise链等待，会直接继续执行下一个步骤。

修复步骤 #

1. 先修复put函数，让它返回Promise

首先要确保put能正确等待延迟完成，所以把它改成返回Promise的形式：

function put(text, duration){
  $('#txtRemarks').text(text);
  // 假设你的delay是基于setTimeout的异步逻辑，包装成Promise
  return new Promise(resolve => {
    setTimeout(resolve, duration);
  });
}

// 如果你的delay函数本身已经返回Promise（比如自定义的异步延迟），可以简化成：
// function put(text, duration){
//   $('#txtRemarks').text(text);
//   return delay(duration);
// }

2. 修正play1和play2，返回内部的Promise链

让这两个函数返回自己的Promise链，这样外部的Promise才能等待它们执行完毕：

function play1(){
  // 一定要return这个Promise链！
  return Promise.resolve()
    .then(() => put('A', 1000))
    .then(() => put('B', 1000))
}
function play2(){
  // 修正then的写法，把延迟时间传给put，而不是当成then的第二个参数
  return Promise.resolve()
    .then(() => put('C', 1000))
    .then(() => put('D', 1000))
}

3. 现在playAllSequentially就能正常工作了

现在这个函数会严格按照play1完成（A→B）之后再执行play2（C→D）的顺序运行：

function playAllSequentially(){
  return Promise.resolve()
    .then(() => play1())
    .then(() => play2())
}

// 调用测试：
playAllSequentially();

额外说明 #

如果你的delay是同步阻塞的函数（比如用while循环卡线程），虽然能实现顺序，但会导致浏览器卡死，这是非常不推荐的写法。所以一定要用异步的Promise形式来处理延迟，既保证顺序，又不阻塞页面。

内容的提问来源于stack exchange，提问作者Jose Diaz