JavaScript异步问题：无法让代码按指定顺序执行，求解决方案

你的问题核心是 initialize 函数没有返回一个能跟踪所有 setTimeout 完成状态的 Promise，所以 await initialize() 只会等待 initialize 里的循环执行完毕，不会等所有 colorcells 都执行完，导致 draw_path 提前运行。

修改方案 #

把 initialize 改造成返回 Promise，并用 Promise.all 等待所有 setTimeout 对应的异步操作完成：

function initialize() {
  // 收集每个setTimeout对应的Promise
  const timeoutPromises = [];
  
  for (let i = 1; i < 20; i++) {
    const cellPromise = new Promise((resolve) => {
      setTimeout(() => {
        colorcells(i);
        resolve(); // 当前setTimeout执行完成，标记这个Promise已完成
      }, i * 30);
    });
    timeoutPromises.push(cellPromise);
  }
  
  // 等待所有Promise完成后，才让initialize的Promise resolve
  return Promise.all(timeoutPromises);
}

function colorcells(cell) {
  // 你的cell着色逻辑
}

function draw_path() {
  // 最后执行的路径绘制逻辑
}

async function init() {
  await initialize();
  draw_path();
}

// 启动代码
init();

补充说明 #

如果 colorcells 内部也包含异步操作（比如DOM请求、网络请求），需要把 colorcells 也改成返回 Promise，然后在 setTimeout 里 await 它：

async function colorcells(cell) {
  // 异步操作，比如await fetch(...)或者await DOM操作
}

// 对应的initialize里的setTimeout部分要改成：
setTimeout(async () => {
  await colorcells(i);
  resolve();
}, i * 30);

这样就能确保所有异步操作都按顺序完成后，才执行 draw_path。

内容的提问来源于stack exchange，提问作者Francisco Gutierrez Ramirez