如何在 React JS 中清除另一个 function 中的 setTimeout？

Question

I have something like this:

  redTimeout = () => {
    setTimeout(() => {
      this.props.redBoxScore();

      this.setState({
        overlayContainer: 'none'
      });

    }, 5000);
  }

And I have a method runs when a button is clicked:

  handleTerminate = () => {

  }

How can I stop the setTimeout in the another function when the button is clicked?

Answer 1

Put the timeout ID returned by setTimeout into state or a ref or something so that you can reference it in the other function:

redTimeout = () => {
  const timeoutId = setTimeout(() => {
    this.props.redBoxScore();
    this.setState({
      overlayContainer: 'none'
    });

  }, 5000);
  this.setState({ timeoutId });
}
handleTerminate = () => {
  clearTimeout(this.state.timeoutId);
}