JavaScript实现函数顺序执行：让second()在first()填充字典后运行

核心逻辑 #

问题根源是populateDict()是异步操作（比如请求数据、读取本地资源等），同步调用会导致second()在字典填充完成前就执行。我们需要用Promise标记异步操作的完成状态，让second()等待填充结束后再运行。

步骤1：改造populateDict为返回Promise的异步函数 #

把填充字典的异步逻辑包装进Promise，操作完成后通过resolve通知外部：

function populateDict() {
  return new Promise((resolve) => {
    // 替换成你的实际异步逻辑（比如fetch请求、文件读取）
    setTimeout(() => {
      // 示例：模拟异步填充字典
      window.targetDict = { name: "test", id: 123 };
      resolve(); // 字典填充完成，触发后续流程
    }, 1000);
  });
}

步骤2：让first()返回Promise #

让first()直接返回populateDict()的Promise，方便外部监听完成状态：

function first() {
  return populateDict(); // 返回Promise，标记填充操作的完成节点
}

步骤3：控制second()的执行时机 #

有两种简洁的实现方式：

方式1：使用.then()链式调用 #

在first()的Promise完成后调用second()：

// 绑定按钮点击事件
document.querySelector("#yourButtonId").addEventListener("click", () => {
  first().then(() => {
    second(); // 字典填充完成后才执行
  });
});

function second() {
  loopThroughDict();
}

function loopThroughDict() {
  // 此时targetDict已填充完成，可正常遍历
  for (const [key, value] of Object.entries(window.targetDict)) {
    console.log(`${key}: ${value}`);
  }
}

方式2：使用async/await（更直观的同步写法） #

用async函数包裹逻辑，通过await等待first()完成：

document.querySelector("#yourButtonId").addEventListener("click", async () => {
  await first(); // 等待字典填充完成
  second(); // 之后执行second
});

// 其余函数同方式1

优化：避免全局变量（可选） #

如果不想用全局字典，可以让populateDict直接返回填充好的字典，通过Promise传递：

function populateDict() {
  return new Promise((resolve) => {
    setTimeout(() => {
      const filledDict = { name: "test", id: 123 };
      resolve(filledDict); // 返回填充好的字典
    }, 1000);
  });
}

function first() {
  return populateDict();
}

async function handleClick() {
  const dict = await first();
  second(dict); // 把字典传入second
}

function second(dict) {
  loopThroughDict(dict);
}

function loopThroughDict(dict) {
  for (const [key, value] of Object.entries(dict)) {
    console.log(`${key}: ${value}`);
  }
}

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