如何封装浏览器重绘后执行目标函数的可复用异步方法？

基于Promise的封装（推荐） #

这种方式支持async/await，调用起来更简洁，适配现代异步编程场景：

function waitForRepaint() {
  return new Promise(resolve => {
    requestAnimationFrame(() => {
      setTimeout(resolve);
    });
  });
}

使用示例 #

// 隐藏加载动画后弹出提示
loader.classList.add('hidden');
waitForRepaint().then(() => {
  alert(res);
});

// 用async/await写法更直观
async function handleAfterRepaint() {
  loader.classList.add('hidden');
  await waitForRepaint();
  // 这里可以执行任意后续逻辑，比如调用其他业务函数
  someBusinessFunction();
}
handleAfterRepaint();

基于回调函数的封装 #

如果项目环境有特殊限制，也可以用传统回调方式：

function waitForRepaint(callback) {
  requestAnimationFrame(() => {
    setTimeout(callback);
  });
}

使用示例 #

loader.classList.add('hidden');
waitForRepaint(() => {
  alert(res);
  // 直接在这里写后续逻辑即可
});

封装逻辑说明 #

• requestAnimationFrame会在浏览器下一次重绘前触发回调，确保DOM修改（比如添加hidden类）已被纳入重绘队列。
• 后续的setTimeout会把执行逻辑推入宏任务队列，等重绘完成后再执行，完全依赖浏览器事件循环机制，不需要硬编码延迟时间，比单纯用setTimeout更精准。

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