在调用通过相同函数显示计时器的 JavaScript 函数之前清除标签 [会话超时]

Question

我尝试使用以下函数在标签中的网页上显示计时器（标签 ID 为 MsgTimer）。但是，当该函数被调用 2 次/更多次时，会显示 2 个/更多计时器，它不会重置计时器，而是重载标签文本并在标签上显示多个计时器。我想在每次调用函数时重置标签文本。

function startTimer() {
    var x;
    clearInterval(x);
    document.getElementById("MsgTimer").innerHTML = "";
    // Here I was supposed to fetch the SessionTimeout data from appsettings.json 
    // But for now I entered data manually for 15 minutes
    var countDownDate = new Date().getTime() + 900000;
    // Update the count down every 1 second              
    x = setInterval(function () {        
        // Get todays date and time
        var now = new Date().getTime();
        // Find the distance between now and the count down date
        var distance = countDownDate - now;
        // Time calculations for days, hours, minutes and seconds
        var hours = Math.floor(distance / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // add a zero in front of numbers<10
        function checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
        hours = checkTime(hours);
        minutes = checkTime(minutes);
        seconds = checkTime(seconds);


        // Display the result in the element with id="lblTime"
        document.getElementById("MsgTimer").innerHTML = "";
        document.getElementById("MsgTimer").innerHTML = "Session Expires In" + " " + minutes + " : " + seconds + "";

        // If the count down is finished, write some text
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("MsgTimer").innerHTML = "SESSION EXPIRED";
            window.alert("Session Timeout");
        }                     
    }, 1000);
}
startTimer();

Answer 1

您的代码的问题可能是 var x; 声明，因为使用 var 关键字声明的变量实际上是函数范围的。

因此，每次调用startTimer(); 时，它只会在函数范围内创建一个新的x 变量，因此clearInterval(x) 无法清除先前的间隔，因为它无法访问x 的先前值来自之前的startTimer(); 电话。

尝试将您的 var x; 声明移到函数之外，看看它是否有效。

Answer 2

更新[工作]：

/* Timer - Display Session Timeout */
var x = 0;
function startTimer() {        
    var countDownDate = (new Date().getTime()) + ((parseInt(@SessionTimer)) * 60000);
    clearInterval(x);
    x = setInterval(function () {
        var now = new Date().getTime();
        var distance = countDownDate - now;
        var hours = Math.floor(distance / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        function checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
        hours = checkTime(hours);
        minutes = checkTime(minutes);
        seconds = checkTime(seconds);
        document.getElementById("MsgTimer").innerHTML = "Session Expires In" + " " + hours + " : " + minutes + " : " + seconds + "";
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("MsgTimer").innerHTML = "SESSION EXPIRED";
            window.alert("Session Timeout");
        }
    }, 1000);
}
startTimer();    

Answer 3

替代[JQuery]：

/* Show 15 Minutes Timer */
var timer2 = "15:01";
var interval = setInterval(function () {
    var timer = timer2.split(':');
    //by parsing integer, I avoid all extra string processing
    var minutes = parseInt(timer[0], 10);
    var seconds = parseInt(timer[1], 10);
    --seconds;
    minutes = (seconds < 0) ? --minutes : minutes;
    if (minutes < 0) clearInterval(interval);
    seconds = (seconds < 0) ? 59 : seconds;
    seconds = (seconds < 10) ? '0' + seconds : seconds;
    //minutes = (minutes < 10) ?  minutes : minutes;
    $('.countdown').html('Session Expires In' + ' ' + minutes + ':' + seconds);
    timer2 = minutes + ':' + seconds;
}, 1000);