React按钮内按特定顺序调用多函数的执行顺序异常问题

核心问题 #

你的代码执行顺序混乱的原因有两个：

1. 初始Promise没有调用resolve()，导致后续then回调永远不会被正确触发，之前两个函数“可行”是巧合（setTimeout不受Promise状态影响直接执行）。
2. then方法错误地直接传入setTimeout(...)的返回值（定时器ID），而非回调函数，这会导致所有定时器几乎同时启动，完全失去顺序控制。

修正后的代码 #

使用async/await语法让异步流程更直观，同时确保每个异步操作完成后再执行下一步：

<button id="zoomInButton" disabled={props.has_zoomed != 1} onClick={async () => {
  // 第一步：执行图片缩放，等待动画完成
  await new Promise(resolve => {
    setTransform(x=-3740, y=-1860, scale=4.25, animationTime=3000);
    // 假设缩放动画时长为3000ms，动画结束后resolve
    setTimeout(resolve, 3000);
  });

  // 第二步：执行图片渐隐动画，等待动画完成
  await new Promise(resolve => {
    // 利用jQuery fadeTo的完成回调，动画结束时resolve
    $("#village").fadeTo(3000, 0, resolve);
  });

  // 第三步：完全隐藏元素并触发弹窗
  $("#village").hide();
  alert("YES");
}}>
  +
</button>

关键说明 #

• 用async标记点击回调，允许内部使用await等待每个异步任务完成。
• 每个异步操作（缩放、渐隐）都被包裹成Promise，确保前一步完成后才进入下一步。
• 对于jQuery的fadeTo，直接使用它的第三个参数（完成回调）来触发Promise的resolve，比额外嵌套setTimeout更准确。

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