Блог

Главная - Вопросы по программированию - setInterval продолжает выполняться после вызова clearInterval

setInterval продолжает выполняться после вызова clearInterval

#javascript #reactjs #setinterval #use-effect

#javascript #reactjs #setinterval #использование-эффект

Вопрос:

Это фрагмент кода:

 var interval3 = null;

React.useEffect(() => {
    if(running) {
    if(interval3) clearInterval(interval3);    
    interval3 = setInterval(() => {
         console.log('running')
      }, 1000);}
      else {
        clearInterval(interval3)
      }  
    
}, [running]);

Я проверил решения, предложенные в других сообщениях, но ни одно из них не работает.

Комментарии:

1. Если вы объявляете переменную в основной части функционального компонента, она будет переделываться каждый раз при повторном рендеринге компонента. Если вы хотите, чтобы переменная сохранялась между рендерами, вам нужно сохранить ее в ссылке

Ответ №1:

Вы можете использовать значение состояния для отслеживания и сохранения идентификатора интервала. Подробности см. ниже.

   const [id, setId] = useState(null);

  useEffect(() => {
    if (running) {
      if (id) return;
      const intervalId = setInterval(() => {
        console.log('running');
      }, 1000);
      setId(intervalId)
    } else {
      setId(null);
      clearInterval(id);
    }
  }, [running, id]);