Trouble With Countdown Timer

Question

I'm having trouble with a simple counter, that counts down from 10 minutes. The problem is, when I call the function countdown(), and add 10 [minutes] as the value, it stops when it gets to 9 minutes, not 2 minutes.

The confusing part is, when I add another value, say 3 minutes, it works exactly as intended. I have a fiddle demonstrating the issue here.

Also, here is my script:

var timeoutHandle;

function countdown(minutes) {
    var seconds = 60;
    var mins = minutes

    function tick() {
        var counter = document.getElementById("taoTimer");
        var current_minutes = mins - 1
        seconds--;
        counter.innerHTML = current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
        if (seconds > 0) {
            timeoutHandle = setTimeout(tick, 1000);
        } else {
            if (mins > 1) {
                jQuery('#taoTimer').addClass('taoIncreaseUrgency');
                alert("Warning! You only have 2 minutes left!");
                // countdown(mins-1);   never reach “00″ issue solved:Contributed by Victor Streithorst
                setTimeout(function() {
                    countdown(mins - 1);
                }, 1000);
            } else if (seconds === 0) {
                // Build the container for pop-up CTA
                jQuery('#applicationWrapper').append('<div id="taoTimeOut"></div>');
                jQuery('<span id="taoClose">close [x]</span>').appendTo('#taoTimeOut');
                jQuery('<span id="taoSessionMsg">Your session has timed out. To resume your booking, please click continue below</span>').insertAfter('#taoClose');
                jQuery('<button id="taoContBtn">Continue</button>').insertAfter('#taoSessionMsg');
                alert("Time is up!");
                // Add page overlay, preventing user interaction
                // with the rest of the page.
                jQuery('<span id="taoPageOverlay"></span>').prependTo('#guestInfo');
                // TEMPORARILY REMOVE THE SESSION TIMEOUT FOR VALIDATION THAT REMOVING IT WORKS
                jQuery('#sessionTimeoutCounter').remove();
                // Click event for users to remove CTA and continue reservation
                jQuery('#taoClose, #taoContBtn, #taoPageOverlay').on('click', function() {
                    jQuery('#taoTimeOut, #taoPageOverlay').remove();
                    location.reload(); // reload page
                });
            }
        }
    }
    tick();
}
countdown(3);

I reached out to the Developer who created this, but have not gotten a response yet. Any guidance you can provide is appreciated.

Answer 1

the countdown is not stopping at 9:00, the alert showing only 2 minutes left appears after every minute, that is because you have put it under if (mins > 1) to solve this issue you can put another condition before showing alert, something like this will fix it:

if (mins > 1) {
    if (mins === 3){
        jQuery('#taoTimer').addClass('taoIncreaseUrgency');
        alert("Warning! You only have 2 minutes left!");
    }
    // countdown(mins-1);   never reach “00″ issue solved:Contributed by Victor Streithorst
    setTimeout(function() {
        countdown(mins - 1);
    }, 1000);
} else if (seconds === 0) {

Answer 2

Your code is design to warning you after every minute.

if (seconds > 0) {
            timeoutHandle = setTimeout(tick, 1000);
        } else {

The message about left minutes is fix and always informs about 2 minutes lefts.

 alert("Warning! You only have 2 minutes left!");