Clear the label before calling a JavaScript function which displays timer through the same function [Session Timeout]

Question

I tried to display timer on webpage in label (label id is MsgTimer) using following function. But when the function is called the 2/more times then 2/ more timers are displayed and it won't reset the timer but overload the label text and display multiple timers on a lable. I want to reset the label text each time the function is called.

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

The problem with your code might be the var x; declaration, because variables declared using var keywords, are actually function scoped.

So, every time startTimer(); is called it is creating a new x variable within the function scope only and because of that the clearInterval(x) cannot clear the previous interval because it cannot access the previous value of x from previous startTimer(); call.

Try moving your var x; declaration outside the function and see if it works.

Answer 2

Updated [Working]:

/* 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();