Функция setIntervall станет быстрее после смены роутера

Question

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

Answer 1

Дело не в том, что слайд-шоу быстрее, но вы получите другой интервал, который меняет слайды, потому что вы не останавливаете предыдущий интервал, когда компонент отключен.

Вы можете поместить число, возвращенное с 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);
  };
}

Answer 2

Полагаю, вы добавляете новый интервал каждый раз, когда возвращаетесь на сайт. Если вы присмотритесь, вы увидите, что разница во времени между слайдами меняется, поэтому задается несколько интервалов.

Вы можете предотвратить это, вызвав setInterval только один раз, первоначально, или используйте clearInterval, чтобы очистить предыдущий интервал.