Creating a countdown timer with Javascript that can be started and stopped

I am looking for assistance in creating a countdown timer inside a dialog box.

The logic will be as such: 1 - There is a datatable where a row is clickable (done) 2 - This opens a dialog that shows more information about the item (done) 3 - This item has an expiration date and I would like to show a countdown (attempted)

I am able to create a countdown timer and display it being counted down. However, when I close the dialog and click on another item, the countdown timer conflicts with the previously created countdown.

The function to create the countdown is as follows:

var countFunction = function countDownTimer(timeToCount) {          var countDownDateTime = new Date(timeToCount).getTime();          var now = new Date().getTime();          var remaining = "Timer has expired.";            var timeLeft = countDownDateTime - now;            if (timeLeft > 0) {              const parts = {                  days: Math.floor(timeLeft / (1000 * 60 * 60 * 24)),                  hours: Math.floor((timeLeft / (1000 * 60 * 60)) % 24),                  minutes: Math.floor((timeLeft / 1000 / 60) % 60),                  seconds: Math.floor((timeLeft / 1000) % 60),              };              remaining = Object.keys(parts).map(part => {                  return `${parts[part]} ${part}`;              }).join(" ");              $('#P_CountDownTimer').text(remaining);          }                }  

To call the function, within the script of opening the dialog, I use the following:

countDownTimer(cancellationDateTime);  setInterval(countDownTimer(cancellationDateTime), 1000);  

Can anyone please guide me on how I can "destroy" the timer when I close the dialog?

https://stackoverflow.com/questions/67013994/creating-a-countdown-timer-with-javascript-that-can-be-started-and-stopped April 09, 2021 at 09:43AM