Question

https://protected-temple-97157.herokuapp.com/

这里有我的应用程序，如果打开，您会发现幻灯片放映没有问题，图像在6秒钟后会更改，但是如果您转到其他路由器，然后在第一张图像放回首页后，幻灯片放映会变得更快< / p>

 componentDidMount() {
    this.slide();
}

slide = () => {
    $(".slideshow > .card:gt(0)").hide();
    setInterval(() => {
        $(".slideshow > .card:first")
            .fadeOut(3000)
            .next()
            .fadeIn(3000)
            .end()
            .appendTo('.slideshow')
    }, 6000)
}

Answer 1

我想您每次回到站点时都会添加一个新的间隔。如果仔细观察，会发现幻灯片之间的时差有所不同，因此设置了多个间隔。

您可以通过在最初仅调用一次setInterval或使用clearInterval清除上一个间隔来防止这种情况。

Answer 2

并不是幻灯片显示的速度更快，而是您将获得另一个更改幻灯片的间隔，因为在卸载组件时您不会停止前一个间隔。

您可以将setInterval返回的数字放在组件上，并在clearInterval中调用componentWillUnmount来解决此问题。

示例

class App extends React.Component {
  interval = null;

  componentDidMount() {
    this.slide();
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  slide = () => {
    $(".slideshow > .card:gt(0)").hide();
    this.interval = setInterval(() => {
      $(".slideshow > .card:first")
        .fadeOut(3000)
        .next()
        .fadeIn(3000)
        .end()
        .appendTo(".slideshow");
    }, 6000);
  };
}

更换路由器后功能setIntervall变得更快

2 个答案: