Как заменить функцию setTimeout?

Question

Я хочу установить тайм-аут на X секунд.Если X изменяется, я хочу очистить тайм-аут и начать новый тайм-аут на основе нового значения X. Когда я пытаюсь стереть тайм-аут, он не будет работать.Вот мой код

componentWillReceiveProps(nextProps) {
    if (this.props.expirationTimeout !== nextProps.expirationTimeout) {
      this.setState({ 
          expirationTimeout: nextProps.expirationTimeout 
      });
      window.clearTimeout(this.setExpiration);
      this.setExpiration(nextProps.expirationTimeout);
    }
}

setExpiration(time) {
    let timeouts = [];
    for (var i = 0; i < timeouts.length; i++) {
      clearTimeout(timeouts[i]);
    }
    var t = time - new Date().getTime();
    timeouts.push(setTimeout(this.state.logoutUserAndRedirect, t));
}

Answer 1

1. чтобы использовать clearTimeout() вам нужен идентификатор, который setTimeout вернул раньше
2. В настоящее время результат setTimeout с идентификатором таймера сохраняется в переменной уровня блока timeouts. Так что нет возможности использовать его для clearTimeout в componentWillReceiveProps.
3. Поскольку каждое изменение состояния вызывает повторную визуализацию, я предлагаю не сохранять значение props.expirationTimeout в состоянии. То же самое для logoutUserAndRedirect. Нет смысла хранить его в state.
4. что если новое значение таймера меньше предыдущего? Что делать, если в соответствии с новым значением вы уже упустили время, чтобы сделать то, что вы планируете? setTimeout будет работать таким образом, если получит значение задержки <0. Разве это не здорово? :) </li>

5. [UPD] также я считаю, что необходимо сохранять метку времени, когда начался недавний тайм-аут. Таким образом, мы сможем исправить это позже, после изменения значения задержки.

   componentWillReceiveProps(nextProps) {
       if (this.props.expirationTimeout !== nextProps.expirationTimeout) {
           this.modifyExpiration(this.timerStartedAt + nextProps.expirationTimeout - this.props.expiration);
       }
   }
   
   modifyExpiration(time) {
       this.timeoutId && clearTimeout(this.timeoutId);
       this.timeoutId = setTimeout(this.logoutUserAndRedirect, time);
       this.timerStartedAt = +new Date();
   }