setTimeout() функция вызывается перед длительностью таймаута?

Question

У меня есть проект React, где я пытаюсь построить карусель. У меня есть кнопка слева и справа и некоторые круги под моей карусели, чтобы выбрать слайды по отдельности.

Чтобы изменить слайды в карусели, я использую комбинацию интервалов и времени ожидания для воспроизведения слайд-анимации, а также чтобы убедиться, что он работает в цикле, если пользователь не нажмет ничего:

changeImageTimer(index = 0) { 
    end = new Date().getMilliseconds(); 
    console.info(end - start); 
    setTimeout(()=> { 
     this.addAnimation(); 
    }, this.props.timeToChangeImage - this.props.timeOfTransitionAnimation); 
    animationTimeout = setTimeout(() => { 
     if (this.state.index >= this.props.data.length - 1) { 
      index = 0; 
     } else { 
      index = this.state.index + 1; 
     } 
     this.setState({index: index}); 
     this.removeAnimation(); 
    }, this.props.timeToChangeImage); 
    animationInterval = setInterval(() => { 
     setTimeout(()=> { 
      this.addAnimation(); 
     }, this.props.timeToChangeImage - this.props.timeOfTransitionAnimation); 
     animationTimeout = setTimeout(() => { 
      if (this.state.index >= this.props.data.length - 1) { 
       index = 0; 
      } else { 
       index = this.state.index + 1; 
      } 
      this.setState({index: index}); 
      this.removeAnimation(); 
     }, this.props.timeToChangeImage); 
    }, this.props.timeToChangeImage); 
} 

кнопки для выбора отдельного слайда имеет эту функцию прикрепленную:

clickSelector(index) { 
    this.clearIntervalsAndTimers(); 
    this.setState({index: index}); 
    start = new Date().getMilliseconds(); 
    timeout = setTimeout(this.changeImageTimer(index), this.props.timeToHoldPictureAfterClick); 
} 

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

Однако код 'changeImageTimer' запускается сразу же после функции 'clickSelector' и не запускается после установленной задержки таймаута.

Почему у меня такое поведение?

Answer 1

Это из-за параметра. Первым аргументом вашей функции должен быть параметр. Надеюсь, это поможет. Why is the method executed immediately when I use setTimeout?

передать параметр

setTimeout(function() { 
    this.changeImageTimer(index); 
}, this.props.timeToHoldPictureAfterClick) 

Надеется, что это помогает

Answer 2

изменить так:

timeout = setTimeout(this.changeImageTimer.bind(this,index), this.props.timeToHoldPictureAfterClick); 

Answer 3

Вашего тайм-аут вызывает функцию, ваши передачи его независимо от changeImageTimer возвращается. Вместо этого свяжите функцию так, чтобы setTimeout получил функцию, предварительно загруженную с помощью args.

timeout = setTimeout(this.changeImageTimer.bind(this, index), this.props.timeToHoldPictureAfterClick); 

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

this.timeout = setTimeout(this.changeImageTimer.bind(this, index), this.props.timeToHoldPictureAfterClick); 
// ... later on in your code 
clearTimeout(this.timeout)