CODEWITHSUNDEEP
javascriptreactjsredux
Pruthvi
Pruthvi

Reputation: 89

setInterval and clearInterval - Does not stop my timer

I am creating a countdown timer. In one part of the code, I use setinterval to reduce my variable by 1 for the seconds timer. In this case, the state is set to true, so that the timer is running. Clicking the pause button sets the state to false and the clearInterval is triggered. But then, my timer is still running.

Here's my code:

import React from "react";
import "./App.css";
import { useSelector, useDispatch } from "react-redux";
import { playToggle, reset } from "./actions/indexAction";

function Timer() {
  const timer = useSelector((state) => state.timer);
  const sessionLength = useSelector((state) => state.sessionLength);
  let minutes = sessionLength;
  let seconds = 60;
  let refreshIntervalID;

  const dispatch = useDispatch();

  let resetClick = () => {
    return dispatch(reset());
  };

  let timerFunction = () => {
    if (timer == true) {
      seconds--;
      console.log(seconds);
    }
  };

  if (timer == "reset") {
    minutes = sessionLength;
    seconds = 60;
    console.log("Is Reset");
  }

  if (timer == true) {
    console.log("timer is playing");
    refreshIntervalID = setInterval(timerFunction, 1000);
  } else {
    console.log("timer is paused");
    clearInterval(refreshIntervalID);
  }
  return (
    <div>
      <h1>Minutes: {minutes}</h1>
      <h1>Minutes: {seconds}</h1>
      <div>
        <button onClick={() => dispatch(playToggle())}>PLAY/PAUSE</button>
      </div>
      <div>
        <button onClick={resetClick}>RESET</button>
      </div>
    </div>
  );
}

export default Timer;

I have looked around for answers but no luck,

And, here I tried the stateful version, and still no luck. The code is as follows:

import React from "react";
import "./App.css";
import { useSelector, useDispatch } from "react-redux";
import { playToggle, reset, play, pause } from "./actions/indexAction";

function Timer() {
  const timer = useSelector((state) => state.timer);
  const sessionLength = useSelector((state) => state.sessionLength);
  let minutes = sessionLength;
  let seconds = 60;
  var refreshIntervalID;

  const dispatch = useDispatch();

  let resetClick = () => {
    return dispatch(reset());
  };

  let timerFunction = () => {
    if (timer == true) {
      seconds--;
      console.log(seconds);
    }
  };

  if (timer == "reset") {
    minutes = sessionLength;
    seconds = 60;
    console.log("Is Reset");
  }

  if (timer == true) {
    console.log("timer is playing");
    refreshIntervalID = dispatch(play());
    console.log(refreshIntervalID);
  } else {
    clearInterval(dispatch(pause()));
  }

  return (
    <div>
      <h1>Minutes: {minutes}</h1>
      <h1>Minutes: {seconds}</h1>
      <div>
        <button onClick={() => dispatch(playToggle())}>PLAY/PAUSE</button>
      </div>
      <div>
        <button onClick={resetClick}>RESET</button>
      </div>
    </div>
  );
}

export default Timer;

Please help me on this one.

Thanks!

Upvotes: 0

Views: 359

Answers (1)

Surya Mahadi
Surya Mahadi

Reputation: 292

try to check your refreshIntervalID before assign with new value

if (timer == true) {
    console.log("timer is playing");
    if(!refreshIntervalID) {
       refreshIntervalID = setInterval(timerFunction, 1000);
    }
  } else {
    console.log("timer is paused");
    clearInterval(refreshIntervalID);
    refreshIntervalID = null;
  }

if you want to stop the timer, just set refreshIntervalID to null

Upvotes: 2

Related Questions