如何在第三方非异步回调中等待异步函数执行完成？

这个问题确实挺棘手的——第三方库完全不关注回调的返回值，不理会Promise，直接加async关键字用await根本起不到等待作用，还不能傻呵呵阻塞事件循环（那会直接卡死UI）。我来给你几个可行的解决方案，按优先级排序：

1. 优先利用库提供的API拦截绘制流程（最优解） #

如果第三方库设计得还算友好，大概率会提供阻止默认绘制和手动触发绘制的API。核心思路是：在回调里先叫停默认的绘制流程，等异步操作完成后，再手动触发绘制。

举个代码示例（假设库支持这些API）：

libraryObject.onBeforeDrawOnScreen(function() {
  // 1. 阻止默认的绘制行为（具体方式看库文档，比如返回false）
  const shouldPreventDefault = true;

  // 2. 执行异步函数，完成后手动触发绘制
  myAsyncFunc().then(() => {
    // 假设库提供了手动触发绘制的方法
    libraryObject.triggerDrawOnScreen();
  });

  return shouldPreventDefault;
});

你需要先仔细翻一遍第三方库的文档，找类似cancelDraw、preventDefault或者manualDraw这类关键词的API，这是最稳妥的方案。

2. DOM监听+回滚（兜底hack方案） #

如果库完全没提供任何可操作的钩子，但它的绘制逻辑是基于DOM修改的（比如往某个容器里渲染内容），可以用MutationObserver监听目标DOM的变化，在异步操作完成前回滚任何绘制操作，等异步结束后再重新触发绘制。

代码示例：

let isAsyncPending = false;
// 替换成库实际渲染的目标元素
const renderTarget = document.getElementById('library-render-container');

// 创建DOM变化监听器
const observer = new MutationObserver((mutations) => {
  if (isAsyncPending) {
    // 回滚DOM修改，撤销这次绘制
    mutations.forEach(mutation => {
      if (mutation.type === 'childList') {
        // 移除新增的节点
        mutation.addedNodes.forEach(node => node.remove());
        // 恢复被删除的节点
        mutation.removedNodes.forEach(node => renderTarget.appendChild(node));
      } else if (mutation.type === 'attributes') {
        // 恢复属性旧值
        renderTarget.setAttribute(mutation.attributeName, mutation.oldValue);
      }
    });

    // 异步操作完成后，解除标记并重新触发绘制
    myAsyncFunc().then(() => {
      isAsyncPending = false;
      libraryObject.triggerDrawOnScreen(); // 同样需要库支持手动触发
    });
  }
});

// 监听目标元素的所有DOM变化
observer.observe(renderTarget, {
  attributes: true,
  childList: true,
  subtree: true,
  oldValue: true
});

// 在回调里标记异步操作待完成
libraryObject.onBeforeDrawOnScreen(function() {
  isAsyncPending = true;
});

这个方案比较hack，可能会有视觉闪烁或者DOM状态不一致的问题，所以只有在第一种方案行不通的时候再考虑。

3. 重构异步函数为同步（迫不得已的选择） #

如果上面两种都不行，那只能把myAsyncFunc里的异步逻辑改成同步的。比如：

• 如果用了fetch，可以换成同步版的fetch（但主线程用同步fetch会阻塞UI，非常不推荐）
• 如果是定时器类的异步操作，有没有办法用同步逻辑替代？

举个同步fetch的例子（仅作演示，浏览器环境慎用）：

function mySyncFunc() {
  const response = fetch('/api/data', { method: 'GET' }).response;
  const data = response.json();
  // 原本的异步逻辑改成同步
}

libraryObject.onBeforeDrawOnScreen(function() {
  mySyncFunc(); // 现在可以同步执行完成
});

这个方案的副作用很大，会阻塞整个页面的交互，所以不到万不得已不要用。

绝对要避免的错误做法 #

千万别用while循环来等待Promise完成！这会直接阻塞事件循环，导致页面卡死，因为Promise的回调是在微任务队列，而while循环会一直占着宏任务队列，永远不会执行微任务：

// 绝对不要这么写！
libraryObject.onBeforeDrawOnScreen(function() {
  let done = false;
  myAsyncFunc().then(() => done = true);
  while (!done) {} // 无限阻塞，页面直接卡死
});

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