如何使用Promise配合setTimeout实现带时延的数字升序控制台打印

• 错误的resolve触发时机：你在创建Promise时直接将setTimeout的返回值（定时器ID）传入resolve，等于Promise刚初始化就立刻完成了，完全没有等待定时器回调执行，导致.then会立刻触发后续逻辑，顺序完全失控
• 第三个Promise中你在定义setTimeout之后立刻调用了resolve()，同样没有等待3秒的定时器执行
• 代码中使用了未定义的变量n，运行时会抛出引用错误
• 嵌套.then的写法可读性很差，建议用async/await简化逻辑

JS代码（async/await版本，更易维护） #

$('#btn2').click(() => {
  myFuncingFunction();
})

// 封装通用延迟工具函数，复用逻辑
function delay(ms, callback) {
  return new Promise((resolve) => {
    setTimeout(() => {
      callback?.()
      resolve()
    }, ms)
  })
}

async function myFuncingFunction() {
  console.log('1');
  // 等待2秒打印2
  await delay(2000, () => console.log('2'))
  // 再等待1秒打印3
  await delay(1000, () => console.log('3'))
  // 再等待3秒打印Yay
  await delay(3000, () => console.log('Yay'))
}

JS代码（纯.then链式版本，和你原写法逻辑更接近） #

$('#btn2').click(() => {
  myFuncingFunction();
})

function myFuncingFunction() {
  console.log('1');
  new Promise((resolve) => {
    setTimeout(() => {
      console.log('2');
      resolve();
    }, 2000);
  }).then(() => {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log('3');
        resolve();
      }, 1000);
    })
  }).then(() => {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log('Yay');
        resolve();
      }, 3000);
    })
  })
}

HTML代码 #

和原有代码保持一致即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn2">Go</button>

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