javascript - sweetalert2 取消计时器/超时

Question

我想用 SweetAlert2 在 5 秒后创建一个可取消的自关闭模式，但我找不到停止计时器的方法，请帮忙!这是js代码:

$(document).on('click', '#view_more_trigger', function(e) { 
    e.preventDefault();
    var div = document.getElementById('view_more');
    div.style.display = div.style.display == 'none' ? 'block' : 'none';
    $(this).html( div.style.display == 'none' ? "View Moar" : "View Less");
});

var closeInSeconds=10,
    timerInterval;

var my_swal = swal({
    type:   'success',
    html:   '<div id="view_more" style="display: none;">'+
                $('#details').html() +
            '</div>'+
            '<a href="javascript:;" id="view_more_trigger" >View more</a>'+
            '<p id="show_timeout" style="display: none;"></p>',
    timer: closeInSeconds * 1000,

    onOpen: () => {

        $('#show_timeout').show();
        timerInterval = setInterval(function() {

            $(document).on('click', '#view_more_trigger', function(e) { 
                e.preventDefault();

                console.log('trying desperately to cancel the damn timer!');
                //swal.stop();                //  error, function !exists
                //my_swal.timeout.stop();     //  Cannot read property 'stop' of undefined
                //my_swal.timer.stop();       //  Cannot read property 'stop' of undefined


                // ..or to increase it
                if(closeInSeconds<1000) {
                    console.log('incrementing closeInSeconds by 1000');
                    closeInSeconds +=1000;
                }
                //swal.timer = closeInSeconds * 1000;

                swal.timer = closeInSeconds * 1000;
                my_swal.timer = closeInSeconds * 1000;

                clearInterval(timerInterval);
            });

            closeInSeconds--;
            if (closeInSeconds < 0) {
                clearInterval(timerInterval);
            }

            swal.getContent().querySelector('#show_timeout').textContent = (Math.round(swal.getTimerLeft()/1000)*1000)/1000 + 's';

        }, 1000);
    },
    onClose: () => {
        clearInterval(timerInterval)
    },

    showConfirmButton: false,
});

我发现唯一可以使用计时器的函数是 Swal.getTimerLeft()。

我在 https://codepen.io/teoui/pen/MzdzWy 中创建了一支笔一起玩

谢谢!

Answer 1

我是 SweetAlert2 的作者，刚刚发布了一个支持 Swal.stopTimer() 的新版本。

使用方法如下:

Swal.fire({
  title: 'Auto close alert!',
  html: 'I will close in 5 seconds. <a href id="stop-timer">Stop timer</a>',
  timer: 5000,
  didOpen: () => {
    Swal.getHtmlContainer().querySelector('#stop-timer').addEventListener('click', e => {
      e.preventDefault()
      Swal.stopTimer()
    })
  }
})

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>