Как мне вызвать clearInterval из нескольких мест в моем приложении? - PullRequest
Новая
       20

Как мне вызвать clearInterval из нескольких мест в моем приложении?

0 голосов
/ 11 января 2020

У меня есть таймер обратного отсчета, который мне нужно сбросить из более чем одного места в моем приложении React Native. У меня есть сервисная функция, которая возвращает мою обновленную строку времени, и переменную, в которую функция setInterval сохраняется с помощью обратных вызовов returnCountDown и returnSetInterval: 

export const getCountdown = (callLength, returnCountDown, returnSetInterval) => {
  let callLengthInMs = Date.parse('1970-01-01T00:' + callLength + 'Z')
  const interval = setInterval(() => parseTimeString(), 1000, returnCountDown)
  const parseTimeString = () => {
    callLengthInMs -= 1000;
    const timeLeft = new Date(callLengthInMs).toISOString().slice(14, -5)
    returnCountDown(timeLeft);
  }
  returnSetInterval(interval);
}

Затем в компоненте функции я сохраняю вернул setInterval функцию, чтобы заявить и вызвать ее при определенных условиях, но clearInterval не работает: 

const CountDown = () => {

  const [time, setTime] = useState(null);
  const [callInterval, setCallInterval] = useState(null);
  const callLength = useSelector(state => state.videosession.callLength);

  useEffect(() => {
    getCountdown(callLength, returnCountDown, returnSetInterval);
  }, []);

  const returnCountDown = timeLeft => {
    setTime(timeLeft);
  }

  const returnSetInterval = interval => {
    setCallInterval(interval)
  }

  time === '00:05' && console.log('00:05 HIT') && clearInterval(callInterval); // does not work.

Как мне добиться возможности вызывать clearInterval через экспортируемый модуль, если это не правильный подход?

Большое спасибо заранее! :)

Обновление

Когда я console.log(typeof interval) получаю number. Эта переменная присваивается setInterval

1 Ответ

0 голосов
/ 12 января 2020

Что ж, если речь идет только об одном компоненте, 


ComponentDidMount=()=>{
 this.interval = setInterval(()=>{}, 1000);
}

ComponentWillUnmount=()=>{
clearInterval(this.interval)
}

Если это не только один компонент, то вам может понадобиться использовать избыточность, которая разрешает глобальное состояние, к которому можно получить доступ через любой компонент в вашем приложении, поэтому Вы можете назначить интервал глобальному состоянию и использовать это состояние в любом месте вашего приложения.

...