setInterval увеличивает свою скорость при каждом нажатии на кнопу

Рейтинг: 1Ответов: 1Опубликовано: 07.02.2023

Как сделать что бы setInterval не увеличивал свою скорость ?

Вот есть функция

  const mozgi_1 = useCallback(
    () => {
      setNum_zombe(num_zombe + dromPointMozgi)
      if(num_z1 >= 1) {
        setNum_z1(num_z1 -1)
        let mozgi1 = document.getElementById('mozgi1');
        mozgi1.classList.remove('__obj___mozgi-block')
      }
    },
    [num_zombe, dromPointMozgi, num_z1],
  )

она привязана за кнопкой и ее же отрабатывает setInterval

  React.useEffect(() => {
    setInterval( 
      mozgi_1
  , 600);
  }, [mozgi_1])

Все нормально до того времени пока я не начну нажимать на кнопку после каждого нажатия setInterval работает все быстрее и быстрее. Как это исправить?

javascript reactjs
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

В вашем примере, при каждом изменении значения mozgi_1(вызове) вызывался useEffect, который повторно запускал таймер

React.useEffect(() => {
  const time = setInterval(
    mozgi_1
    , 600);

  return () => {
    clearInterval(time);
  }
}, []);

Т.е. вам надо убрать зависимости из useEffect, тогда он сработает один раз при загрузке.

Если компонент будет отмонтирован, то интервал остановится