Disable the setTimeout() function in order to prevent the countdown from refreshing

Question

Disable the setTimeout() function in order to prevent the countdown from refreshing

I have a JavaScript countdown function that is working well, but I am unsure how to stop and refresh the timer to extend the time. When I call the function again before it times out, it behaves strangely by showing two countdown timers because the updateTimer() function is still active. After searching online, I came across the clearTimeout() function as a solution to stop this issue, but I don't know how to implement it in this function.

Can someone please assist me in stopping and refreshing this timer?

function countdown(elementName, minutes, seconds) {
    var element, endTime, hours, mins, msLeft, time;

    function twoDigits(n) {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer() {
        msLeft = endTime - (+new Date);
        if (msLeft < 1000) {
            element.innerHTML = "00:00";
        } else {
            time = new Date(msLeft);
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = twoDigits(time.getUTCMinutes()) + ':' + twoDigits(time.getUTCSeconds());
            setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
        }
    }

    element = document.getElementById(elementName);
    endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
    updateTimer();

    return stopTimer();
}

countdown("countdown", 0, 30);

javascript

Answer 1

Answer №1

Make sure to assign your setTimeout() to a variable. You won't be able to clear anonymous timeouts.

var timeout;

function timerCountdown(elementName, minutes, seconds) {
    var element, endTime, hours, mins, msLeft, time;

    function twoDigits(n) {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer() {
        msLeft = endTime - (+new Date);
        if (msLeft < 1000) {
            element.innerHTML = "00:00";
        } else {
            time = new Date(msLeft);
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = twoDigits(time.getUTCMinutes()) + ':' + twoDigits(time.getUTCSeconds());
            timeout = setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
        }
    }

    element = document.getElementById(elementName);
    endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
    updateTimer();

    stopCountdown();
}

function stopCountdown() {
  clearTimeout(timeout);
}

timerCountdown("countdown", 0, 30);

Answer 2

Make sure to assign your setTimeout() to a variable. You won't be able to clear anonymous timeouts.

var timeout;

function timerCountdown(elementName, minutes, seconds) {
    var element, endTime, hours, mins, msLeft, time;

    function twoDigits(n) {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer() {
        msLeft = endTime - (+new Date);
        if (msLeft < 1000) {
            element.innerHTML = "00:00";
        } else {
            time = new Date(msLeft);
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = twoDigits(time.getUTCMinutes()) + ':' + twoDigits(time.getUTCSeconds());
            timeout = setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
        }
    }

    element = document.getElementById(elementName);
    endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
    updateTimer();

    stopCountdown();
}

function stopCountdown() {
  clearTimeout(timeout);
}

timerCountdown("countdown", 0, 30);

Answer 3

Answer №2

To ensure the timer stops at the specified time, you must assign the value returned by setTimeout(...) to a global variable and then use this global variable as an argument for the clearTimeout() function.
To implement this, follow these steps:

let timer;


function countdown(elementID, minutes, seconds) {
    var element, endTime, hours, mins, msLeft, currentTime;
    


    function addLeadingZero(n) {
        return (n <= 9 ? "0" + n : n);
    }

    function stopTimer(timeVar) {
        return clearTimeout(timeVar);
    }

    function updateTimer() {
        msLeft = endTime - (+new Date);
        if (msLeft < 1000) {
            element.innerHTML = "00:00";
        } else {
            currentTime = new Date(msLeft);
            hours = currentTime.getUTCHours();
            mins = currentTime.getUTCMinutes();
            element.innerHTML = addLeadingZero(currentTime.getUTCMinutes()) + ':' + addLeadingZero(currentTime.getUTCSeconds());
            timer = setTimeout(updateTimer, currentTime.getUTCMilliseconds() + 500);
        }
    }

    element = document.getElementById(elementID);
    endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
    updateTimer();

    return stopTimer(timer);
}

countdown("countdown", 0, 30);

Answer 4

To ensure the timer stops at the specified time, you must assign the value returned by setTimeout(...) to a global variable and then use this global variable as an argument for the clearTimeout() function.
To implement this, follow these steps:

let timer;


function countdown(elementID, minutes, seconds) {
    var element, endTime, hours, mins, msLeft, currentTime;
    


    function addLeadingZero(n) {
        return (n <= 9 ? "0" + n : n);
    }

    function stopTimer(timeVar) {
        return clearTimeout(timeVar);
    }

    function updateTimer() {
        msLeft = endTime - (+new Date);
        if (msLeft < 1000) {
            element.innerHTML = "00:00";
        } else {
            currentTime = new Date(msLeft);
            hours = currentTime.getUTCHours();
            mins = currentTime.getUTCMinutes();
            element.innerHTML = addLeadingZero(currentTime.getUTCMinutes()) + ':' + addLeadingZero(currentTime.getUTCSeconds());
            timer = setTimeout(updateTimer, currentTime.getUTCMilliseconds() + 500);
        }
    }

    element = document.getElementById(elementID);
    endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
    updateTimer();

    return stopTimer(timer);
}

countdown("countdown", 0, 30);

Disable the setTimeout() function in order to prevent the countdown from refreshing

Answer №1

Answer №2

Similar questions

`Populating fields in Firebase``

Creating a textbox with pre-filled content

A Step-by-Step Guide to Successfully Clicking on a Checkbox Using Selenium and Python

Redirecting in AngularJS after a successful login操作

Tap here to switch between 2 jquery functions

The server's file URLs are modified within the page source of a WordPress site

Navigating Pre-Fetched Client Routes in Gatsby with @ReachRouter

Tips for creating a console.log wrapper specifically designed for Angular2 using Typescript

The initial $http POST in Angular ends up hitting the error path within the .then function despite the successful execution of the

Exploring the data-* attribute in jQuery

A guide on extracting the values of checked checkboxes by their ID using javascript

Using a static string in Javascript yields no issues, whereas working with variables can sometimes cause problems

Does the modularization of code impact the performance of the react-app?

Updating contact list to a database table structure

Interpret data from an external JSON file into a HighCharts chart using JavaScript

Child components are not able to access properties from the root component in VUE3

The div swiftly clicks and moves beyond the screen with animated motion

JavaScript - The left dropdown menu stubbornly remains visible when clicked in white space, unlike the right dropdown which disappears as expected. Puzzled by this inconsistency

Is it acceptable for a video to autoplay even if it is not connected to the DOM?

Is it possible to customize the color of icons in react's Material-table?