jquerydatecountdownjquery-countdown

jQuery countdown not restarting


I'm using the jquery countdown to countdown to a specific date and time. When the counter expires I want the counter to be destroyed, restarted with the current time plus 10 minutes and with a new expiry-function.

But for some reason, when my first timer runs out the expiry function for the second timer is executed and the 10-min countdown starts.

I have tried several combinations including 'option', moving the function around...but I can't make it work so that the last function (a simple console log) is called as the final expiry function.

Here is my code:

var select = new Date(data.select);  //date from server

$('#counter').countdown({
    until: select,
    format: 'dhms',
    layout: ' ({h<}{hn} timer {h>}{m<}{mnn} minutter {m>}{s<}{snn} sekunder{s>})',
    onExpiry: onCounter
});

function onCounter() {
    $('#counter').countdown('destroy');
    $('#counter').countdown({
        until: '+10m',
        format: 'ms',
        layout: ' ({m<}{mnn} minutter {m>}{s<}{snn} sekunder{s>})',
        onExpiry: console.log('times up') // last function to be called
    });
}

Solution

  • Your onCounter onExpiry is not a function, so is executed immediately rather than on expiry:

    function onCounter() {
        $('#counter').countdown('destroy');
        $('#counter').countdown({
            until: '+10m',
            format: 'ms',
            layout: ' ({m<}{mnn} minutter {m>}{s<}{snn} sekunder{s>})',
            onExpiry: function() { console.log('times up'); } 
        });
    }
    

    or you can create a new function and call that, the same way you do with the first:

    function onFinalCounter() {
        console.log("times up");
    }
    
    function onCounter() {
        $('#counter').countdown('destroy');
        $('#counter').countdown({
            until: '+10m',
            format: 'ms',
            layout: ' ({m<}{mnn} minutter {m>}{s<}{snn} sekunder{s>})',
            onExpiry: onFinalCounter
        });
    }