setInterval is running after the page is change

Question

Im having a problem with my function, after the page is change, the function keeps running and I got error, how can I stop it, thanks

 componentDidMount() {
    var current = 0;
    var slides = document.getElementsByClassName("j1");

    setInterval(function() {
          let rec = window.location.href;
          rec = rec.split('/');
          console.log(rec);

          for (var i = 0; i < slides.length; i++) {
            slides[i].style.opacity = 0;
            for (var j = 0; j < 10000; j++) {
              let k = j;
            }

          }
          current = (current != slides.length - 1) ? current + 1 : 0;
          slides[current].style.opacity = 1;

    }, 5000);
    } 

Answer 1

You have to unregister your interval. Something like this:

class Example extends React.Component {
  componentDidMount() {
    this.timer = window.setInterval(function() {
      ....
    }, 5000);
  }

  componentWillUnmount() {
    window.clearInterval(this.timer);
  }
}