javascript - 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

Greeting appears for 5seconds and fades out
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

ponentDidMount() {
    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? 
}

Here is my attempt, Codepen

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

Greeting appears for 5seconds and fades out
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

ponentDidMount() {
    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? 
}

Here is my attempt, Codepen

Share Improve this question edited Apr 20, 2019 at 6:51 asked Mar 3, 2018 at 14:54 semosem 581 gold badge1 silver badge7 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 10

In showGreeting,you are setting timeout and storing it in local const varibale.Instead bind it to ponent 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 ponentDidUpdate lifecycle.

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

ponentDidUpdate{
   clearTimeout(this.timer);
}

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 );
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - setTimeout and clearTimeout in reactJS - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)