timeout（）の前に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)