How to stop setinterval from another function

Question

I have two functions within my background.js. First function starts a counter, the second clears it from local storage. The problem is the setInterval in the first function keeps on running even after the second function is triggered. How can I clear a setinterval from another function?

background.js

function startTimelapsFunction() {
if (!localStorage.getItem('startTime')) {
  localStorage.setItem('startTime', Date.now());
}

const startTime = parseInt(localStorage.getItem('startTime'), 10);

const writeTime = () => {
  console.log('startTime', startTime)
  const currentTime = Date.now();
  console.log('currentTime', currentTime)
  const secondsDiff = Math.floor((currentTime - startTime) / 1000);
  console.log('secondsDiff', secondsDiff)
  document.body.innerText = secondsDiff;
  localStorage.setItem('myCat', secondsDiff);
};
setInterval(writeTime, 1000);
writeTime();
}



function resetTimelapsFunction() {
  localStorage.removeItem("myCat");
  localStorage.removeItem("startTime");
}

Answer 1

Store the intervalId returned by setInterval and run clearInterval(intervalId) where intervalId is the stored value (always an integer number for the timer you set)

let intervalId = null; // This creates a variable to identify which interval you are referring to

function startTimelapsFunction() {
    if (!localStorage.getItem('startTime')) {
      localStorage.setItem('startTime', Date.now());
    }
    
    
    const startTime = parseInt(localStorage.getItem('startTime'), 10);
    
    const writeTime = () => {
      console.log('startTime', startTime)
      const currentTime = Date.now();
      console.log('currentTime', currentTime)
      const secondsDiff = Math.floor((currentTime - startTime) / 1000);
      console.log('secondsDiff', secondsDiff)
      document.body.innerText = secondsDiff;
      localStorage.setItem('myCat', secondsDiff);
    };
    intervalId = setInterval(writeTime, 1000); // Here you assign the ID to the previously created variable
    writeTime();
    }
    


function resetTimelapsFunction() {
  localStorage.removeItem("myCat");
  localStorage.removeItem("startTime");
  clearInterval(intervalId) // Here you tell Javascript to clear that interval timer with the specific ID you provide it. This allows Javascript service workers to identify which specific interval you would like to clear if you create several.

}

This is from the Javascript docs:

The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. It returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval().

Hope this helps! When coding you fluctuate between states of feeling like a God or a Dog, hopefully you're feeling like a God again ;)