1

I want to be able to start the setInterval when the app runs but also pause it, and re-start the setInterval with an onMouseEnter event. Right now, I have sentInterval tucked in the componentDidMount life cycle: 

  componentDidMount() {
    this.timer = setInterval(() => {
      this.forward();
    }, 4000);
  }

I know this doesn't work.

I tried wrapping setInterval in an if statement that would run when I hovered over a component, but when the component mounts I am not hovering so it doesn't run. And componentDidMount only fires once, so I am not sure how I would pause setInterval if componentDidMount only fires once.

I also tried to create a separate timer function outside of componentDidMount, that fires by componentDidMount but I essentially run into the same issue. I feel like recursion needs to be used here somewhere. I don't know where I would call a function that starts setInterval anywhere else but componentDidMount, but then I don't have access to it again. Or do I?

Salvatore DePalma
  • 39
  • 5
  • Does this answer your question? [Pause and resume setInterval](https://stackoverflow.com/questions/24724852/pause-and-resume-setinterval) – The Fool Apr 25 '20 at 19:12

1 Answers1

0

you can keep the setInterval timer code in functions and keep the timer reference in a class instance (this.timer). Now you can call that function in componentDidMount, mouseOver etc. That function must be responsible for clearing/setting timer based on the conditional parameter.

harpreet Singh
  • 1