事件触发时如何立即启动setTimeout，无需等待初始15秒？

你的问题出在代码逻辑搞反了——现在页面一加载就启动了15秒的定时器，要等定时器跑完才会弹出弹窗。要实现事件触发时立刻弹窗，同时开始15秒计时，时间到自动关闭，可以按以下方式修改：

最优方案：利用SweetAlert自带的timer属性 #

SweetAlert的timer参数本来就是弹窗显示后开始计时，到点自动关闭，完全匹配你的需求，不需要额外写setTimeout。

修正后的代码 #

// 弹窗函数：调用时立刻显示弹窗，同时启动15秒自动关闭计时
function myFunction() {
  Swal.fire({
      title: "Processing Payment",
      html: "<img src='https://www.boasnotas.com/img/loading2.gif' height='30px' />",
      buttons: false,
      closeOnClickOutside: false,
      timer: 15000 // 弹窗显示后开始倒计时15秒，自动关闭
  })
}

// 手动关闭弹窗的函数（比如支付完成时调用）
function closePaymentAlert() {
  Swal.close(); // 关闭弹窗的同时，SweetAlert会自动停止内部的timer
}

// 监听你的目标事件（比如按钮点击、表单提交），触发时调用myFunction
// 示例：按钮点击事件
document.getElementById('your-button-id').addEventListener('click', function() {
  myFunction();
});

逻辑说明 #

• 移除了原代码中页面加载时自动创建的setTimeout，这是导致先等15秒才弹窗的核心原因。
• 当事件触发时（比如按钮点击），直接调用myFunction()，弹窗会立刻显示，同时SweetAlert内部的15秒计时启动，时间到自动关闭弹窗。
• 如果需要在计时结束前手动关闭（比如支付成功），调用closePaymentAlert()即可，它会终止计时并关闭弹窗。

备选方案：自己手动管理setTimeout #

如果一定要用自己的setTimeout来控制关闭逻辑，也可以这样写：

let alertTimer; // 用来存储定时器ID

function myFunction() {
  // 立刻显示弹窗
  Swal.fire({
      title: "Processing Payment",
      html: "<img src='https://www.boasnotas.com/img/loading2.gif' height='30px' />",
      buttons: false,
      closeOnClickOutside: false
  });
  // 弹窗显示后，启动15秒定时器，到时关闭弹窗
  alertTimer = setTimeout(function() {
    Swal.close();
  }, 15000);
}

// 手动清除定时器并关闭弹窗
function clearTimerAndClose() {
  clearTimeout(alertTimer);
  Swal.close();
}

// 事件触发时调用myFunction
document.getElementById('your-button-id').addEventListener('click', myFunction);

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