寻求替代递归调用setTimeout的Promise优雅实现方案及直接resolve不生效问题排查

看起来你现在的场景是要等页面上所有异步数据请求完成后再触发PDF打印，同时还要有超时兜底，之前用递归轮询的方式确实不够优雅，而且还遇到了直接resolve没生效的问题，我来帮你梳理下解决方案和问题原因。

一、替代递归轮询的优雅Promise实现方案 #

你之前的递归轮询其实是在不断检查计数器，这种轮询的方式既浪费资源又不够高效，更好的方式是基于事件触发：只有当removeWaiter把计数器减到0的时候，才主动触发resolve，同时用一个独立的定时器来处理超时逻辑，这样就不用反复轮询了。

这里给你优化后的实现：

class WaitForPrint {
  constructor() {
    this.pendingTasks = 0;
    this.timeoutMs = 10000; // 超时时间
    this.resolveFn = null;
    this.rejectFn = null;
    this.timeoutId = null;
  }

  addWaiter() {
    this.pendingTasks++;
    // 如果已经启动了超时定时器，不用重复启动
    if (!this.timeoutId) {
      this.startTimeout();
    }
  }

  removeWaiter() {
    if (this.pendingTasks <= 0) return; // 避免计数器出现负数
    this.pendingTasks--;
    
    if (this.pendingTasks === 0 && this.resolveFn) {
      console.log("所有异步任务已完成，准备触发打印");
      // 先清除超时定时器，避免后续误触发
      this.clearTimeout();
      this.resolveFn(true);
      // 重置实例状态，支持多次复用
      this.resetState();
    } else {
      console.log(`还有${this.pendingTasks}个异步任务未完成`);
    }
  }

  startTimeout() {
    this.timeoutId = setTimeout(() => {
      console.log("超时：异步任务未在规定时间内完成");
      this.rejectFn(new Error("WaitForPrint timeout"));
      this.resetState();
    }, this.timeoutMs);
  }

  clearTimeout() {
    if (this.timeoutId) {
      clearTimeout(this.timeoutId);
      this.timeoutId = null;
    }
  }

  resetState() {
    this.pendingTasks = 0;
    this.resolveFn = null;
    this.rejectFn = null;
    this.timeoutId = null;
  }

  waitForPrint() {
    return new Promise((resolve, reject) => {
      this.resolveFn = resolve;
      this.rejectFn = reject;
      
      // 初始化时如果已经没有待处理任务，直接resolve
      if (this.pendingTasks === 0) {
        console.log("没有待处理的异步任务，直接触发打印");
        resolve(true);
        this.resetState();
        return;
      }
      
      // 启动超时定时器
      this.startTimeout();
    });
  }
}

这个实现的核心优势：

• 无轮询开销：只有在removeWaiter触发且计数器归0时才主动resolve，性能更高效
• 超时逻辑独立：任务完成后立刻清除定时器，避免超时误触发
• 边界处理严谨：防止计数器出现负数、重复启动定时器等问题
• 支持实例复用：完成/超时后自动重置状态，可多次调用waitForPrint

二、直接resolve不生效的问题排查 #

你提到直接调用this.resolves(true)时，生成的PDF没有显示等待的数据，但加了setTimeout(500)就正常了，这个问题的核心原因是DOM更新的异步性：

当你的异步任务完成后，虽然你拿到了数据并更新了DOM，但浏览器的DOM渲染、布局计算是异步执行的（属于浏览器的渲染队列任务）。如果此时立刻resolve触发打印，浏览器还没来得及完成DOM的重绘和布局，打印工具捕获的还是旧的DOM状态，所以看不到新数据。

而setTimeout(fn, 500)相当于把resolve操作放到了下一个宏任务队列，给了浏览器足够的时间去完成：

1. 数据更新后的DOM节点渲染
2. 页面布局重计算
3. 样式规则的应用

如果你觉得固定500ms的延时不够灵活，也可以尝试用requestAnimationFrame来替代，它会在浏览器下一次重绘前执行，比固定延时更贴合浏览器的渲染节奏：

// 在removeWaiter的计数器为0时替换成：
requestAnimationFrame(() => {
  // 嵌套一层确保布局完全更新
  requestAnimationFrame(() => {
    this.resolveFn(true);
  });
});

如果页面用了React/Vue这类框架，更可靠的方式是用框架提供的DOM更新完成钩子（比如React的useEffect、Vue的nextTick）来触发resolve，这样能精准对齐框架的DOM更新时机。

另外还要注意：第三方打印工具本身可能也有异步初始化逻辑，确保你的resolve是在所有DOM更新完成后再触发，才能保证PDF内容完整。

内容来源于stack exchange