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

Question

Как сделать что бы 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 работает все быстрее и быстрее. Как это исправить?

Answer 1

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

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

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

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

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

БЛОГ НА HUSL

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

Ответы (1 шт):