Javascript 设置超时以响应函数

我有以下对象列表：

mediaList[
 {id:1, url:"www.example.com/image1", adType:"image/jpeg"},
 {id:2, url:"www.example.com/image2", adType:"image/jpg"},
 {id:3, url:"www.example.com/video1", adType: "video/mp4"}
]

我需要创建一个幻灯片，有一个可配置的持续时间（1，5，10秒）。 到目前为止，我可以从

mediaList

  renderSlideshow(ad){
    let adType =ad.adType;
    if(type.includes("image")){
      return(
        <div className="imagePreview">
          <img src={ad.url} />
        </div>
      );
    }else if (adType.includes("video")){
      return(
        <video className="videoPreview" controls>
            <source src={ad.url} type={adType}/>
          Your browser does not support the video tag.
        </video>
      )

    }
  }

 render(){   
    return(
      <div>
          {this.props.mediaList.map(this.renderSlideshow.bind(this))}
      </div>
    )
 }

---

我只是不知道如何在这个场景中实现它。（我相信我需要在淡入淡出过渡中使用css，但我只是不知道如何首先创建过渡）

如果你想每5秒更改一次介质，你必须更新状态以重新渲染组件，你也可以使用

设置间隔

而不是

设置超时

setTimeout

将仅触发一次，

setInterval

将每X毫秒触发一次。下面是它可能的样子：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeMediaIndex: 0 };
  }

  componentDidMount() {
    setInterval(this.changeActiveMedia.bind(this), 5000);
  }

  changeActiveMedia() {
    const mediaListLength = this.props.medias.length;
    let nextMediaIndex = this.state.activeMediaIndex + 1;

    if(nextMediaIndex >= mediaListLength) {
      nextMediaIndex = 0;
    }

    this.setState({ activeMediaIndex:nextMediaIndex });
  }

  renderSlideshow(){
    const ad = this.props.medias[this.state.activeMediaIndex];
    let adType = ad.adType;
    if(type.includes("image")){
      return(
        <div className="imagePreview">
          <img src={ad.url} />
        </div>
      );
    }else if (adType.includes("video")){
      return(
        <video className="videoPreview" controls>
            <source src={ad.url} type={adType}/>
          Your browser does not support the video tag.
        </video>
      )

    }
  }

  render(){   
    return(
      <div>
          {this.renderSlideshow()}
      </div>
    )
  }
}

类MyComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.state={activeMediaIndex:0}； } componentDidMount（）{ setInterval（this.changeActiveMedia.bind（this），5000）； } changeActiveMedia（）{ const mediaListLength=this.props.medias.length； 让nextMediaIndex=this.state.activeMediaIndex+1； 如果（nextMediaIndex>=mediaListLength）{ nextMediaIndex=0； } this.setState（{activeMediaIndex:nextMediaIndex}）； } renderSlideshow（）{ const ad=this.props.medias[this.state.activeMediaIndex]； 设adType=ad.adType； if（类型包括（“图像”））{ 返回( ); }else if（adType.includes（“视频”））{ 返回( 您的浏览器不支持视频标记。 ) } } render（）{ 返回( {this.renderSlideshow（）} ) } }

---

基本上，代码所做的是每5秒将activeMediaIndex更改为下一个。通过更新状态，将触发重新渲染。渲染媒体时，只需渲染一个媒体（也可以像经典幻灯片一样渲染上一个和下一个媒体）。因此，每5秒，您将呈现一个新媒体。

不要忘记清除超时以防止内存泄漏：

  componentDidMount() {
    this.timeout = setTimeout(() => {
     ...
    }, 300);
  }

  componentWillUnmount() {
    clearTimeout(this.timeout);
  }

---

这是有道理的，只是测试了一些小的更新，它的工作！非常感谢。

  componentDidMount() {
    this.timeout = setTimeout(() => {
     ...
    }, 300);
  }

  componentWillUnmount() {
    clearTimeout(this.timeout);
  }