setInterval 和 clearInterval - 不停止我的计时器答案

【问题标题】：setInterval and clearInterval - Does not stop my timersetInterval 和 clearInterval - 不停止我的计时器
【发布时间】：2020-04-24 11:04:52
【问题描述】：

我正在创建一个倒数计时器。在代码的一部分中，我使用 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;

请帮我解决这个问题。

谢谢！

【问题讨论】：

标签： javascript reactjs redux

【解决方案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

【讨论】：

还是没有运气。当我尝试这个时，计数器不工作。
哦，我的错，我忘了输入!，再试一次