Question

我正在尝试创建一个在显示主要内容之前淡出的问候UI。可以找到所需的效果HERE

当达到某个滚动输入时，例如从顶部输出100px

问候语显示5秒钟并淡出
主要内容会等到问候消失并显示出来。

我用setTimeout实现了这个效果，但我现在想知道如何正确设置clearTimeout。

这是我的代码

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? 
}

Here是我的尝试，Codepen

Answer 1

在showGreeting中，您设置超时并将其存储在local const varibale中。将其绑定到组件实例，即this。

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

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

当调用showContent状态时，状态会更新，这会触发render，然后触发componentDidUpdate生命周期。

在componentDidUpdate中，使用this.timer清除超时。

componentDidUpdate{
   clearTimeout(this.timer);
}

Answer 2

您可以轻松使用ES6箭头功能，而不会产生以下副作用：

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

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

reactJS中的setTimeout和clearTimeout

2 个答案: