如何正确使用async/await确保函数按顺序执行？

你的核心问题在于greetings函数没有返回Promise，所以await无法感知它的执行完成状态。另外原函数里的两个setTimeout逻辑存在同步问题，可能导致递归调用和DOM插入的时序混乱。

修复步骤 #

1. 让greetings返回一个Promise，在所有DOM插入完成后触发resolve
2. 重构逻辑，确保每次DOM插入完成后再进行下一次操作，避免时序错误

修正后的代码（推荐循环写法） #

const greetingDivs = [firstDiv, secondDiv, thirdDiv, fourthDiv, fifthDiv];

async function greetings() {
  for (const div of greetingDivs) {
    // 用Promise包装定时器，让await能等待500ms
    await new Promise(resolve => setTimeout(resolve, 500));
    consoleOutput.appendChild(div);
  }
  console.log('Greetings are done!');
}

function secondFunction() {
  console.log('I have waited');
}

async function consoleOn() {
  await greetings();
  secondFunction();
}

consoleOn();

代码说明 #

• greetings改为async函数，用for...of循环遍历数组，每次等待500ms后插入DOM元素，确保操作顺序严格按预期执行
• 用new Promise(resolve => setTimeout(resolve, 500))把定时器转换为Promise，让await能正确等待异步操作完成
• consoleOn中直接在await greetings()后调用secondFunction，确保前者完全执行完毕后才触发后者

递归写法（可选） #

如果你偏好递归逻辑，可以这样改造：

const greetingDivs = [firstDiv, secondDiv, thirdDiv, fourthDiv, fifthDiv];
let y = 0;

function greetings() {
  return new Promise((resolve) => {
    function loop() {
      if (y === greetingDivs.length) {
        console.log('Greetings are done!');
        resolve(); // 所有操作完成，标记Promise为已完成
        return;
      }
      setTimeout(() => {
        consoleOutput.appendChild(greetingDivs[y]);
        y++;
        loop(); // 插入完成后再递归执行下一次
      }, 500);
    }
    loop();
  });
}

async function consoleOn() {
  await greetings();
  secondFunction();
}

consoleOn();

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