setInterval和clearInterval – 没有停止我的定时器。

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

请帮我解决这个问题

谢谢!我正在创建一个倒计时器。

解决方案:

试着检查一下你的 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;
  }

如果你想停止定时器,只需设置好 refreshIntervalIDnull

给TA打赏
共{{data.count}}人
人已打赏
解决方案

react-bootstrap如何使用自定义表单控件组件?

2022-5-14 13:00:26

解决方案

google sheets api配额何时恢复?

2022-5-14 13:00:30

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索