Javascript 甜蜜警报计时器 - 完成功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29945646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sweet alert timer - done function
提问by Thomas Teilmann
I have been playing a little with the SweetAlert plugin: Sweet alert
我一直在玩 SweetAlert 插件：Sweet alert
I wanted to make a delete button, where the user gets prompted before the actual delete. When the user then presses "delete" again, is then says "done" and the user has to click "ok" again for the prompt to go away for good.
我想制作一个删除按钮，用户在实际删除之前会收到提示。当用户然后再次按下“删除”时，然后说“完成”并且用户必须再次单击“确定”以使提示永久消失。
SweetAlert has a timer function, so you can auto-close that last "Done" prompt after a few seconds or so, which works just fine. They also have a feature, where you can implement a function to be run when the user clicks "OK" on the "Done" prompt. Problem is, that function is not ran if the prompt auto closes after the timer is done.
SweetAlert 具有计时器功能，因此您可以在几秒钟左右后自动关闭最后一个“完成”提示，效果很好。它们还有一个功能，当用户在“完成”提示上单击“确定”时，您可以实现要运行的功能。问题是，如果计时器完成后提示自动关闭，则不会运行该功能。
Any ideas how this can be done?
任何想法如何做到这一点？
With timerand function not being run:
随着timer和功能没有运行：
swal({
title: "Deleted!",
text: "Your row has been deleted.",
type: "success",
timer: 3000
},
function () {
location.reload(true);
tr.hide();
});
Without timer, but with a working function (when clicking the "ok" button):
没有timer，但具有工作功能（单击“确定”按钮时）：
swal("Deleted!", "Your row has been deleted.", "success"), function () {
location.reload();
tr.hide();
};
回答by Hkidd
Explanation
解释
I think you have to take the swalapart from the function. What I mean is that the swalis displayed, the function runs on the background and the modal automatically closes.
我认为您必须swal将功能与功能分开。我的意思是swal显示，函数在后台运行，模态自动关闭。
Javascript/jQuery:
Javascript/jQuery：
swal({
title: "Deleted!",
text: "Your row has been deleted.",
type: "success",
timer: 3000
});
function () {
location.reload(true);
tr.hide();
};
Your code with an example of SweetAlert:
您的代码与 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");
}
});
回答by Sonson Ixon
Cant you just use then?
你就不能用then吗？
This way is much cleaner.
这种方式干净多了。
swal({
title: 'Login Success',
text: 'Redirecting...',
icon: 'success',
timer: 2000,
buttons: false,
})
.then(() => {
dispatch(redirect('/'));
})
回答by Fendi Setiawan
I found the solution.
我找到了解决方案。
Currently I'm experiment using sweetAlert and I found solution for your question.
This is my custom function for creating sweetalert that will close after a few seconds of timer.
目前我正在使用 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);
}
You can call this method using this code
Remember, timer is using milisecond.
您可以使用此代码调用此方法
请记住，计时器使用毫秒。
sweetAlert('Congratulation!', 'You successfully copy paste this code', 'success', 3000, false);
回答by Ali Mohammed
this issue is fix with new release of Sweetalert 2
这个问题是用新版本的 Sweetalert 2 修复的
https://limonte.github.io/sweetalert2/
https://limonte.github.io/sweetalert2/
see Plunker
见 Plunker
.
回答by TodsaHerb
solution is here.
解决方案在这里。
[https://sweetalert2.github.io/]
[ https://sweetalert2.github.io/]
See. A message with auto close timer
看。带有自动关闭计时器的消息
let timerInterval
Swal.fire({
title: 'Auto close alert!',
html: 'I will close in <strong></strong> milliseconds.',
timer: 2000,
onBeforeOpen: () => {
Swal.showLoading()
timerInterval = setInterval(() => {
Swal.getContent().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')
}
})
My code
我的代码
swal.fire({ type: 'success', title: 'Saved.',
showConfirmButton: false, timer: 1500
}).then((result) => {
if (result.dismiss === Swal.DismissReason.timer) {
$("#new_reminder").modal("hide");
}
});
