SweetAlert2 - 以 showLoading () 开始并在执行函数后关闭

Question

我需要通过加载打开 SweetAlert，执行 JS 函数“myFunc()”并关闭 SweetAlert。

\n\n

我通过加载调用 SweetAlert：

\n\n

Swal.fire ({\n\xc2\xa0\xc2\xa0 title: \'Wait ...\',\n\xc2\xa0\xc2\xa0 onBeforeOpen: () => {\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 Swal.showLoading ()\n\xc2\xa0\xc2\xa0 }\n})\n

\n\n

myFunc() 应该放在代码中的什么位置？

\n

Answer 1

我的想法是，没有任何理由将您的函数包含在 SweetAlertOptions 对象中。由于您仅使用 SweetAlert2 在函数执行时显示加载对话框，并且没有从中获取任何用户输入，因此您可以以程序方式处理它：

Swal.fire({
  title: 'Wait ...',
  onBeforeOpen () {
    Swal.showLoading ()
  },
  onAfterClose () {
    Swal.hideLoading()
  },
  allowOutsideClick: false,
  allowEscapeKey: false,
  allowEnterKey: false
})
myFunc()
Swal.close()

如果您正在使用，async/await请不要等待初始Swal.fire(). 反正你也不关心结果。如果myFunc()是异步的（应该是异步的，以便在加载期间不锁定 UI 线程），等待它然后关闭，或者在 Promise 的解析中关闭

await myFunc()
Swal.close()

或者

myFunc().then(result => {
  Swal.close()
})

或者，您可以在函数中调用myFuncand ：Swal.close()OnOpen

Swal.fire({
  ...
  onOpen () {
    myFunc()
    Swal.close()
  }
  ...
})

Swal.fire({
  ...
  async onOpen () {
    await myFunc()
    Swal.close()
  },
  ...
})

Swal.fire({
  ...
  onOpen () {
    myFunc().then(result => {
      Swal.close()
    })
  }
  ...
})