sweetalert2 取消计时器/超时

Question

I wanted to make a cancelable self-closing modal after 5 seconds with SweetAlert2 but I could't find a way to stop the timer, please help! Here's the js code:

$(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,
});

The only function to work with timer I found is Swal.getTimerLeft().

I created a pen in https://codepen.io/teoui/pen/MzdzWy to play with

Thanks!

Answer 1

I'm the author of SweetAlert2, and a new version with Swal.stopTimer() support was just released.

Here's how you can use it:

 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>