如何在while循环中等待函数执行完成，实现jQuery动画顺序执行？

核心问题在于你的await没有生效，因为function2没有返回Promise——await只能等待Promise完成，而jQuery的animate是异步操作但默认不返回Promise，所以循环会直接跳过等待，导致所有动画同时触发。下面是可行的解决方案：

修复方案：用Promise包装jQuery动画 #

将function2改为返回Promise，在动画完成的回调中标记Promise完成，这样await就能正确等待动画结束后再执行下一次循环。同时要处理元素的索引，确保每次操作的是不同元素。

修改后的代码 #

HTML（补充7个元素）

<html>
  <body>
    <!-- 7个独立元素，添加绝对定位让动画可见 -->
    <p class='element' style='border: 2px solid black; width: 10vw; height: 10vw; position:absolute; top:0; left:0'></p>
    <p class='element' style='border: 2px solid black; width: 10vw; height: 10vw; position:absolute; top:0; left:0'></p>
    <p class='element' style='border: 2px solid black; width: 10vw; height: 10vw; position:absolute; top:0; left:0'></p>
    <p class='element' style='border: 2px solid black; width: 10vw; height: 10vw; position:absolute; top:0; left:0'></p>
    <p class='element' style='border: 2px solid black; width: 10vw; height: 10vw; position:absolute; top:0; left:0'></p>
    <p class='element' style='border: 2px solid black; width: 10vw; height: 10vw; position:absolute; top:0; left:0'></p>
    <p class='element' style='border: 2px solid black; width: 10vw; height: 10vw; position:absolute; top:0; left:0'></p>
  </body>
</html>

JavaScript

async function function1() {
  let q = 0;
  const totalElements = 7;
  while (q < totalElements) {
    await function2(q);
    q++;
  }
}

// 包装动画为Promise，接收索引参数定位元素
function function2(index) {
  return new Promise((resolve) => {
    // 选中第index个.element元素
    $('.element').eq(index).animate(
      {
        top: '100px',
        left: `${45 + index * 6}vw` // 错开位置方便区分效果
      },
      1000, // 动画时长，可按需调整
      () => {
        // 动画完成后标记Promise结束，让await继续执行
        resolve();
      }
    );
  });
}

// 启动执行
function1();

关键说明 #

• Promise包装：function2返回Promise，在jQuery动画的complete回调中调用resolve()，告诉await当前动画已完成，可以进入下一次循环。
• 元素索引：用eq(index)精准选中对应元素，避免所有元素同时执行动画。
• 异步控制：while循环配合await，天然实现了逐个执行的串行逻辑，不会出现递归调用的高频执行问题。

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