如何在函数执行完毕后调用另一函数？socket.io游戏交易站场景

嘿，我太懂你这种情况了——用sleep虽然能临时解决问题，但这种硬编码等待时间的方式真的不太行：万一机器人库存加载变慢，等待时间不够还是会出问题；要是加载变快了，用户又得白白等半天，体验很差。咱们可以利用JavaScript的异步特性，完美解决这个顺序问题，而且完全不用阻塞页面！

方案1：用Promise + then() 控制执行顺序 #

首先把「获取机器人库存」的逻辑包装成一个返回Promise的函数，这样我们就能明确知道它什么时候执行完毕，然后再触发用户库存的加载：

// 封装机器人库存获取函数，返回Promise
function fetchBotInventory() {
  return new Promise((resolve, reject) => {
    // 这里是你的Socket.io调用逻辑
    socket.emit('get_bot_inventory', (botInventory) => {
      if (botInventory) {
        // 先把机器人库存渲染到页面
        renderBotInventory(botInventory);
        // 标记机器人库存加载完成
        resolve(botInventory);
      } else {
        reject(new Error('加载机器人库存失败'));
      }
    });
  });
}

// 页面加载时先启动机器人库存加载，完成后再加载用户库存
window.addEventListener('load', () => {
  fetchBotInventory()
    .then(() => {
      // 机器人库存已经完全加载好了，现在调用用户库存函数
      fetchUserInventory();
    })
    .catch((err) => {
      console.error('机器人库存加载出错:', err);
      // 这里可以加降级处理，比如提示用户，或者依然加载用户库存
      fetchUserInventory();
    });
});

// 你的用户库存获取函数（可以保留原来的逻辑，也可以封装成Promise）
function fetchUserInventory() {
  socket.emit('get_user_inventory', (userInventory) => {
    renderUserInventory(userInventory);
    // 现在两个库存都已就绪，执行过剩检测
    checkInventorySurplus(userInventory);
  });
}

方案2：用async/await 让代码更简洁 #

如果你的环境支持ES8+，用async/await会让代码可读性更高，逻辑更直观：

// 页面加载时执行这个异步函数
window.addEventListener('load', async () => {
  try {
    // 先等待机器人库存加载完成
    await fetchBotInventory();
    // 再等待用户库存加载完成
    const userInventory = await fetchUserInventory();
    // 最后执行过剩检测
    checkInventorySurplus(userInventory);
  } catch (err) {
    console.error('库存加载出错:', err);
  }
});

// 同样要把两个库存函数封装成返回Promise的形式
function fetchBotInventory() {
  return new Promise((resolve, reject) => {
    socket.emit('get_bot_inventory', (botInventory) => {
      botInventory ? (renderBotInventory(botInventory), resolve()) : reject(new Error('Bot inventory failed'));
    });
  });
}

function fetchUserInventory() {
  return new Promise((resolve, reject) => {
    socket.emit('get_user_inventory', (userInventory) => {
      userInventory ? (renderUserInventory(userInventory), resolve(userInventory)) : reject(new Error('User inventory failed'));
    });
  });
}

为什么不用sleep？ #

sleep本质是阻塞JavaScript主线程，这会导致页面在等待期间完全卡住——用户看不到加载动画，也不能操作任何元素，体验非常糟糕。而Promise/async-await是异步非阻塞的，等待过程中页面依然可以响应交互，还能显示加载状态提示用户。

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