setInterval и clearInterval - не останавливает мой таймер

Question

Я создаю таймер обратного отсчета. В одной части кода я использую setinterval, чтобы уменьшить мою переменную на 1 для секундного таймера. В этом случае состояние установлено в true, так что таймер работает. Нажатие кнопки паузы устанавливает состояние в false, и вызывается clearInterval. Но тогда мой таймер все еще работает.

Вот мой код:

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;

Я искал ответы, но не повезло,

И здесь я попробовал версию с состоянием, но все же не повезло. Код выглядит следующим образом:

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;

Пожалуйста, помогите мне в этом.

Спасибо!

Answer 1

попробуйте проверить refreshIntervalID перед присвоением нового значения

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

, если вы хотите остановить таймер, просто установите refreshIntervalID в null