react组件使用setTimeout 定时隐藏 (有demo)

最新推荐文章于 2023-08-09 15:13:33 发布

原创最新推荐文章于 2023-08-09 15:13:33 发布 · 6.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react组件 #定时隐藏 #setTimeout #有demo #codepen demo

react 专栏收录该内容

7 篇文章

订阅专栏

这篇博客详细介绍了如何在React组件中利用setTimeout实现图片的定时隐藏功能。首先阐述了功能需求，包括组件初始化及按钮点击时各展示图片1次，并在1秒后自动隐藏。接着解释了实现原理，通过绑定this并使用匿名函数和setTimeout来设定定时隐藏。提供了关键代码示例，如在componentDidMount生命周期方法中初次执行，以及showSaveCover方法中展示后的隐藏操作。此外，还给出了DEMO地址供读者实践操作。

功能需求

1>初始化时展示 1次图片，1秒后，隐藏图片

2>点击按钮展示 1次图片，1秒后，隐藏图片

原理

绑定this本身，使用匿名函数

使用setTimeout定时

代码

主要代码

1>componentDidMount 加载完毕以后，执行一次

2>showSaveCover 展示后，立即执行隐藏

  componentDidMount() {
    this.showSaveCover();
  }

  showSaveCover() {
    this.setState({
      isWarning: true
    });
    this.hideSaveCover();
  }

  hideSaveCover() {
    var self = this;
    if (this.timer) {
      clearTimeout(this.timer);
    }
    this.timer = setTimeout(() => {
      self.setState({
        isWarning: false
      });
    }, 1000);
  }