倒数计时器故障

时间:2017-08-01 20:06:18

标签: javascript jquery

我在使用一个简单的计数器时遇到了麻烦,从10分钟开始倒计时。问题是,当我调用函数countdown()并添加10 [minutes]作为值时,它会在9分钟而不是2分钟时停止。

令人困惑的部分是,当我添加另一个值时,说3分钟,它完全按照预期工作。我有一个小提示演示问题here

另外,这是我的脚本:

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);

我联系了创建此内容的Developer,但尚未得到回复。您可以提供任何指导。

2 个答案:

答案 0 :(得分:1)

倒计时没有在9:00停止,每分钟后显示仅剩2分钟的警报,这是因为您已将其置于if (mins > 1)下以解决此问题,您可以在显示警报之前放置另一个条件这样的事情会解决它:

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) {

答案 1 :(得分:0)

您的代码旨在每分钟后警告您。

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

关于左分钟的消息已修复,并且始终通知大约2分钟左右。

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