如何从另一个函数停止 setinterval

Question

我的 background.js 有两个功能。第一个函数启动一个计数器，第二个函数将它从本地存储中清除。问题是即使在触发第二个函数后，第一个函数中的 setInterval 仍保持运行。如何从另一个函数中清除 setinterval？

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

您需要保留 setInterval 函数返回的 intervalId 并在您的第二个函数中调用 clearInterval(intervalId)（看看 here）。例如：

let intervalId = null;

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);
 writeTime();
}



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

Answer 2

你可以试试这个。

var myInterval = null;

function startTimelapsFunction() {
  if (myInterval == null) {
    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);
    };

    myInterval = setInterval(writeTime, 1000);
    writeTime();
  }
}

function stopTimelapsFunction() {
  if (myInterval != null) {
    clearInterval(myInterval);
    myInterval = null;
  }
}

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

Answer 3

存储 setInterval 和运行 clearInterval(intervalId) 返回的 intervalId，其中 intervalId 是存储的值（始终是您设置的计时器的整数）

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.

}

这来自 Javascript 文档：

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().

希望对您有所帮助！在编码时，您会在感觉像上帝或狗的状态之间波动，希望您再次感觉像上帝 ;)

Answer 4

这是生命周期的问题...按照这个简单的例子来解决您的问题：

import React, { useEffect, useRef } from 'react';

function MyComponent() {

  const timestampRef = useRef(null); // verify if component exist
  const intervalRef = useRef(null); // save setInterval to when non exist component clear interval
  const startTime = useRef(() => {
    const { startTime = Date.now() } = localStorage; // if not exist value return Date.now()
      return startTime;
  });

  useEffect(() => {
    intervalRef.current = setInterval(() => { // save setInterval in intervalRef
      if (timestampRef.current) { // has component?
        const currentTime = Date.now(); 
        const secondsDiff = Math.floor((currentTime - startTime) / 1000);
        timestampRef.current.innerText = secondsDiff; // apply changes

        localStorage.setItem('startTime', parseInt(secondsDiff, 10)); // update localStorage
      }
      else {
        clearInterval(intervalRef.current); // no existe component, then, clearInterval
      };
    }, 1000);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [timestampRef]);

  return <div ref={timestampRef}>{startTime}</div>
};

export default MyComponent;

希望对您有所帮助！

如何从另一个函数停止 setinterval

How to stop setinterval from another function

javascript

setinterval

google-chrome-extension

reactjs