SweetAlert2加载时执行函数，完成后显示结果弹窗问题

你的问题根源是同步代码阻塞了浏览器UI渲染：耗时函数是同步执行的，浏览器在完成所有同步代码前不会更新页面，导致加载弹窗还没来得及显示，耗时操作就已经执行完毕，直接跳到了结果弹窗。

解决方法：用异步方式执行耗时操作 #

把耗时函数放到异步任务中，让浏览器先渲染加载弹窗，再执行耗时逻辑。

情况1：耗时函数本身支持异步（返回Promise）

用async/await配合didOpen回调：

Swal.fire({
  title: '处理中...',
  html: '请稍等',
  timerProgressBar: true,
  didOpen: async () => {
    Swal.showLoading();
    try {
      // 执行异步耗时函数（比如API请求、文件读取等）
      const result = await yourAsyncHeavyFunction();
      // 关闭加载弹窗，再弹出成功提示
      Swal.close();
      Swal.fire({
        icon: 'success',
        title: '操作成功',
        html: result.message
      });
    } catch (err) {
      Swal.close();
      Swal.fire({
        icon: 'error',
        title: '操作失败',
        html: err.message || '未知错误'
      });
    }
  },
  // 禁止用户手动关闭加载弹窗
  allowOutsideClick: false,
  allowEscapeKey: false
});

情况2：耗时函数是纯同步的

用setTimeout把同步操作放到下一个事件循环，给浏览器留足渲染加载弹窗的时间：

Swal.fire({
  title: '处理中...',
  html: '请稍等',
  timerProgressBar: true,
  didOpen: () => {
    Swal.showLoading();
    // 用setTimeout将同步耗时操作放入异步队列
    setTimeout(() => {
      try {
        // 执行同步耗时函数
        const result = yourSyncHeavyFunction();
        Swal.close();
        Swal.fire({
          icon: 'success',
          title: '操作成功',
          html: result.message
        });
      } catch (err) {
        Swal.close();
        Swal.fire({
          icon: 'error',
          title: '操作失败',
          html: err.message || '未知错误'
        });
      }
    }, 0); // 0毫秒延迟，确保浏览器先完成当前渲染
  },
  allowOutsideClick: false,
  allowEscapeKey: false
});

关键注意点 #

• 必须让加载弹窗的渲染和耗时操作不在同一个同步任务中，避免阻塞UI更新。
• 操作完成后先关闭加载弹窗，再弹出结果弹窗，防止弹窗叠加。
• 添加allowOutsideClick和allowEscapeKey限制，避免用户在加载过程中误关弹窗。

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