javascript - 更换路由器后功能setInterval变得更快

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

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

 componentDidMount() {
    this.slide();
}

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

最佳答案

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

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