Question

我有计时器功能，当剩余时间低于特定值时，会向用户显示prompt框。

通话的代码段

function countdown(duration, display, show) {
        display.innerHTML = toHHMMSS(duration, show);
        timer = setTimeout(function(){countdown(duration, display, show);}, 1000);
        if(duration<1) {
            clearTimeout(timer);
            endSession();
        }
        duration--;
    }

    function toHHMMSS(duration, show) {
        if(duration<300 && show == 1) {
            var newMinutes = prompt("This session will expire in 5 minutes. If you want to extend, enter the minutes below");
            if(newMinutes == null) {
                /* Stop showing the alert box but without affecting the timer */
            }
            var elem = document.getElementById("timer");
            elem.style.color = "Red";
        } else {
            var elem = document.getElementById("timer");
            elem.style.color = "#3BB9FF";
        }
        var sec_num = parseInt(duration, 10); 
        var hours = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if (hours < 10) {
            hours = "0" + hours;
        }
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        var time = hours + ':' + minutes + ':' + seconds;
        return time;
    }

现在，这允许用户输入最终添加到其计时器的值，以使会话运行更长时间。但问题出现在用户点击取消时。由于此检查位于setTimeout调用，间隔为1秒（ Timer ），因此每秒都会调用警报。

我该怎么做才能阻止这种情况的发生，同时不会突破此功能，因为这样会停止计时器

修改添加了完整的代码

Answer 1

发布您的完整代码肯定会有所帮助，但这里有一个快速的JSFiddle，展示了我是如何做到的：http://jsfiddle.net/eklingen/5zqecaap/1/

基本上我会选择一些全局变量来为我保留一切：

var timer = document.getElementById('timer');
var tickInterval = setInterval(tick, 1000);
var alertThreshold = 5;
var remainingTime = 6;
var prompted = false;

function tick() {  
    // Do everything I need to here
}

然而，我会交换警告和提示模态对话框，以保持该计时器运行，看看JS在显示其中一个框时如何冻结间隔和超时。

停止调用提示框一次＆＃39;取消＆＃39;点击

1 个答案: