Sweet alert timer - 完成功能

Question

我一直在玩 SweetAlert 插件：Sweet alert

我想制作一个删除按钮，在实际删除之前用户会收到提示。当用户再次按下 "delete" 时，会显示 "done" 并且用户必须再次单击 "ok" 才能使提示永久消失。

SweetAlert 有一个定时器功能，因此您可以在几秒左右后自动关闭最后一个 "Done" 提示，效果很好。它们还有一个功能，当用户在 "Done" 提示上单击 "OK" 时，您可以实现一个功能运行。问题是，如果在计时器完成后提示自动关闭，则该功能不是运行。

知道如何做到这一点吗？

使用 timer 且函数不是运行:

swal({
     title: "Deleted!",
     text: "Your row has been deleted.",
     type: "success",
     timer: 3000
     },
     function () {
            location.reload(true);
            tr.hide();
     });

没有timer，但有工作功能（点击"ok"按钮时）：

swal("Deleted!", "Your row has been deleted.", "success"), function () {
    location.reload();
    tr.hide();
};

Answer 1

Sweetalert 2

的新版本已修复此问题

查看 Plunker

Plunker

Answer 2

说明

我认为您必须将 swal 与函数分开。我的意思是显示swal，函数在后台运行，模式自动关闭。

Javascript/jQuery:

swal({
     title: "Deleted!",
     text: "Your row has been deleted.",
     type: "success",
     timer: 3000
     });
     function () {
        location.reload(true);
        tr.hide();
     };

带有 SweetAlert 示例的代码：

swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "No, cancel plx!",
    closeOnConfirm: false,
    closeOnCancel: false
    },
    function (isConfirm) {
        if (isConfirm) {
           swal({
              title: "Deleted!",
              text: "Your row has been deleted.",
              type: "success",
              timer: 3000
           });
           function () {
              location.reload(true);
              tr.hide();
           };
        }
        else {
            swal("Cancelled", "Your imaginary file is safe :)", "error");
        }
    });

Answer 3

我找到了解决方案。

目前我正在尝试使用 sweetAlert 并找到了解决您问题的方法。
这是我创建 sweetalert 的自定义函数，它会在定时器几秒后关闭。

var sweetAlert = function(title, message, status, timer = 5000, isReload = false){
    swal({
        title   : title,
        text    : message + '<br/>This pop up will close automatically in <strong class="swal-timer-count">' + timer/1000 + '</strong> seconds...',
        type    : status,
        html    : true,
        timer   : timer,
        allowEscapeKey  : false
    }, function () {
        swal.close();
        if(isReload)
            location.reload(true);
    });
    var e = $(".sweet-alert").find(".swal-timer-count");
    var n = +e.text();
    setInterval(function(){
        n > 1 && e.text (--n);
    }, 1000);
}

您可以使用此代码调用此方法
记住，定时器使用的是毫秒。

sweetAlert('Congratulation!', 'You successfully copy paste this code', 'success', 3000, false);

Answer 4

你不能只使用 then 吗？

这种方式干净多了。

swal({
    title: 'Login Success',
    text: 'Redirecting...',
    icon: 'success',
    timer: 2000,
    buttons: false,
})
.then(() => {
    dispatch(redirect('/'));
})

Answer 5

解决方案在这里。

[https://sweetalert2.github.io/]

看看。带有自动关闭定时器的消息

let timerInterval
Swal.fire({
  title: 'Auto close alert!',
  html: 'I will close in <strong></strong> milliseconds.',
  timer: 2000,
  onBeforeOpen: () => {
    Swal.showLoading()
    timerInterval = setInterval(() => {
      Swal.getHtmlContainer().querySelector('strong')
        .textContent = Swal.getTimerLeft()
    }, 100)
  },
  onClose: () => {
    clearInterval(timerInterval)
  }
}).then((result) => {
  if (
    /* Read more about handling dismissals below */
    result.dismiss === Swal.DismissReason.timer
  ) {
    console.log('I was closed by the timer')
  }
})

我的代码

swal.fire({ type: 'success', title: 'Saved.', 
            showConfirmButton: false, timer: 1500 
}).then((result) => {
    if (result.dismiss === Swal.DismissReason.timer) {
         $("#new_reminder").modal("hide");                            
    }
});

Sweet alert timer - 完成功能

Sweet alert timer - done function

javascript

jquery

sweetalert