CODEWITHSUNDEEP
javascriptreactjs
semosem
semosem

Reputation: 58

setTimeout and clearTimeout in reactJS

I am trying to create a greeting UI that fades out before displaying main content.The desired effect can be found HERE

When a certain scroll input, say 100px from the top, is reached

  1. Greeting appears for 5seconds and fades out
  2. Main content waits until greeting fades out and gets displayed.

I achieved this effect with setTimeout but I now want to know how to set clearTimeout properly.

Here is my code

componentDidMount() {
    window.addEventListener(
      "wheel",
      () => requestAnimationFrame(this.handleScroll.bind(this)),
      false
    );
  }

handleScroll(e){  
    const scrolltop = window.scrollY; 
    scrolltop > 120 ? this.showGreeting().bind(this):null
  }

showGreeting(){
    this.setState({
      greetingDisplay:true,
    })
    const timer = setTimeout(this.showContent.bind(this),5000);
  } 

showContent(){

    this.setState({
      greetingDisplay:false,
      contentDisplay:1,
   })
  //How do I clear the timer here? 
}

Upvotes: 4

Views: 21978

Answers (2)

Roman
Roman

Reputation: 21765

You can easily use ES6 arrow functions without side effects like this:

showContent = () => {
   this.setState({
      greetingDisplay:false,
      contentDisplay:1,
   }); 
}

showGreeting = () => {
    this.setState({
      greetingDisplay:true,
    });
    setTimeout( () => this.showContent, 3000 );
}

Upvotes: 1

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

In showGreeting,you are setting timeout and storing it in local const varibale.Instead bind it to component instance i.e. this.

constructor(){
     this.timer = null;
      //............rest
  }

showGreeting(){
    this.setState({
      greetingDisplay:true,
    })
    this.timer=setTimeout(this.showContent.bind(this),3000);
    ^^^^^^^^^^^
  }

When showContent is called state is updated which will trigger render and then componentDidUpdate lifecycle.

In the componentDidUpdate, use this.timer to clear timeout.

componentDidUpdate{
   clearTimeout(this.timer);
}

Upvotes: 10

Related Questions