如何在setTimeout与Promise间正确实现变量值的定时切换？

你的代码核心问题是没有调用Promise的resolve方法——在setTimeout里只写了resolve，这只是引用了函数，没有执行它，导致Promise一直处于等待状态，后续的then回调根本不会触发，所以第二次赋值永远不会执行。

修正后的Promise实现代码 #

transition = () => {
  return new Promise((resolve, reject) => {
    // 页面加载时的初始赋值
    Cursor2.newDiagonal = this.diagonalWindow();
    setTimeout(() => {
      // 必须调用resolve()来触发后续的then回调
      resolve();
    }, 300);
  }).then(() => {
    console.log("get in");
    // 300ms后执行重新赋值
    Cursor2.newDiagonal = this.diagonalWindow() / 9;
  });
};

更简洁的替代实现 #

如果这段逻辑不需要复用Promise，直接用setTimeout就能完成需求，代码更直观：

transition = () => {
  // 初始赋值
  Cursor2.newDiagonal = this.diagonalWindow();
  // 延迟300ms执行第二次赋值
  setTimeout(() => {
    Cursor2.newDiagonal = this.diagonalWindow() / 9;
    console.log("赋值完成");
  }, 300);
};

关键注意点 #

• 创建Promise后，必须通过调用resolve()或reject()改变Promise状态，否则then/catch回调永远不会触发。
• 仅需延迟执行代码的场景下，直接使用setTimeout比封装Promise更简洁，无需额外的Promise层。

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