Question

0

81

Views

Play/Pause doesn't work with useEffect and using setInterval

Here is my code. Whenever I play the start button, it spasms out. Any help would be appreciated! I'm wanting to, whenever I press the button, a timer for 1 second to count down based on the truthiness of isPlaying.

const [onBreak, setOnBreak] = useState(false) 
const [isPlaying, setIsPlaying] = useState(false)

useEffect(() => {
  const timerFunc = setInterval(() => {
    setIsPlaying(!isPlaying);
    if (!onBreak) {
      if (sessionSec === 0 && sessionMin !== 0) {
        setSessionSec(59);
        setSessionMin(sessionMin - 1);
      } else if (sessionSec !== 0 && sessionMin !== 0) {
        setSessionSec(sessionSec - 1);
      } else if (sessionSec === 0 && sessionMin === 0) {
        setOnBreak(true);
      }
    } else if (onBreak) {
      if (breakSec === 0 && breakMin !== 0) {
        setBreakSec(59);
        setBreakMin(breakMin - 1);
      } else if (breakSec !== 0 && breakMin !== 0) {
        setBreakSec(breakSec - 1);
      } else if (breakSec === 0 && breakMin === 0) {
        setOnBreak(false);
      }
    } else {
      clearInterval(timerFunc);
    }
  }, 100);
}, [isPlaying]);


<button onClick={() => setIsPlaying(!isPlaying)}>{isPlaying ? 'Pause': 'Play'}</button>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-05T07:12:04.173Z

If setIsPlaying(!isPlaying) calls useEffect() then only call setIsPlaying(1isPlaying) once in the onclick. You also need to change the interval duration to 1000 to wait for one second e.g.

const [onBreak, setOnBreak] = useState(false) 
const [isPlaying, setIsPlaying] = useState(false)

useEffect(() => {
  const timerFunc = setInterval(() => {
    if (!onBreak) {
      if (sessionSec === 0 && sessionMin !== 0) {
        setSessionSec(59);
        setSessionMin(sessionMin - 1);
      } else if (sessionSec !== 0 && sessionMin !== 0) {
        setSessionSec(sessionSec - 1);
      } else if (sessionSec === 0 && sessionMin === 0) {
        setOnBreak(true);
      }
    } else if (onBreak) {
      if (breakSec === 0 && breakMin !== 0) {
        setBreakSec(59);
        setBreakMin(breakMin - 1);
      } else if (breakSec !== 0 && breakMin !== 0) {
        setBreakSec(breakSec - 1);
      } else if (breakSec === 0 && breakMin === 0) {
        setOnBreak(false);
      }
    } else {
      clearInterval(timerFunc);
    }
  }, 1000);
}, [isPlaying]);


<button onClick={() => setIsPlaying(!isPlaying)}>{isPlaying ? 'Pause': 'Play'}</button>

0

81

Play/Pause doesn't work with useEffect and using setInterval

1 answers

0

Find remote jobs

Andres GPT