javascript - 切换标签时反应倒计时循环计时器重置
问题描述
在我的项目中,我使用的是 React Countdown Clock Timer NPM 包。我有两个这样的计时器同时出现,一个分钟计时器和秒计时器。一切正常,除了当我切换标签时,我的分钟保持正确的分钟数,而我的秒计时器重置。我希望秒计时器即使在切换标签时仍能保持正确的设置数量。
这是我当前的计时器文件,其中 iies
import React, { useState, useContext } from "react";
import { CountdownCircleTimer } from "react-countdown-circle-timer";
import { AuthContext } from "../../context/Auth";
import { ChillContext } from "../../context/ChillContext";
import { db } from "../../services/firebase";
import firebase from "firebase/app";
import chime from "../../sounds/chime.mp3";
import {
CountdownTimerWrapper,
CountdownTimerMain,
TimersWrapper,
RestartButton,
StartStopButton,
ButtonsWrapper,
TimerCheck,
TimerHeading,
TimerControl,
TimerText,
} from "./CountdownTimerElements";
import Toggle from "../Toggle/Toggle";
import { Howl } from "howler";
const minuteSeconds = 60;
const hourSeconds = 3600;
const renderTime = (dimension, time) => {
return (
<div className="time-wrapper">
<div className="time">{time}</div>
<div>{dimension}</div>
</div>
);
};
const getTimeSeconds = (time) => (minuteSeconds - time) | 0;
const getTimeMinutes = (time) => ((time % hourSeconds) / minuteSeconds) | 0;
const CountdownTimer = () => {
const stratTime = Date.now() / 1000; // use UNIX timestamp in seconds
const workEndTime = stratTime + 25 * 60; // use UNIX timestamp in seconds
const chillEndTime = stratTime + 5 * 60;
const [minutesKey, setMinutesKey] = useState(0);
const [secondsKey, setSecondsKey] = useState(10);
const [playing, setPlaying] = useState(false);
const [timerButtonDesc, setTimerButtonDesc] = useState("Start");
const { currentUser } = useContext(AuthContext);
const { chill, setChill } = useContext(ChillContext);
const chillRemainingTime = chillEndTime - stratTime;
const workRemainingTime = workEndTime - stratTime;
const timerProps = {
isPlaying: playing,
size: 100,
strokeWidth: 6,
};
const sound = new Howl({
src: [chime],
});
return (
<CountdownTimerWrapper>
<CountdownTimerMain>
<TimerHeading>Pomodoro Timer</TimerHeading>
{chill ? (
<TimersWrapper>
<CountdownCircleTimer
{...timerProps}
colors={[["#9294e3"]]}
key={minutesKey}
duration={hourSeconds}
initialRemainingTime={chillRemainingTime % hourSeconds}
onComplete={(totalElapsedTime) => {
return [chillRemainingTime - totalElapsedTime > minuteSeconds];
}}
>
{({ elapsedTime }) =>
renderTime("minutes", getTimeMinutes(hourSeconds - elapsedTime))
}
</CountdownCircleTimer>
<TimerControl>
<Toggle
onChange={(event) => {
setChill(event.target.checked);
setSecondsKey((prevKey) => prevKey + 1);
setMinutesKey((prevKey) => prevKey + 1);
setTimerButtonDesc("Start");
setPlaying(false);
}}
/>
<TimerText>{chill ? "Chill" : "Work"} Timer </TimerText>
</TimerControl>
<CountdownCircleTimer
{...timerProps}
colors={[["#9294e3"]]}
key={secondsKey}
duration={minuteSeconds}
initialRemainingTime={chillRemainingTime % minuteSeconds}
onComplete={(totalElapsedTime) => {
console.log(totalElapsedTime - chillRemainingTime);
if (totalElapsedTime - chillRemainingTime === 0) {
return false;
}
return [chillRemainingTime - totalElapsedTime > 0];
}}
>
{({ elapsedTime }) =>
renderTime("seconds", getTimeSeconds(elapsedTime))
}
</CountdownCircleTimer>
</TimersWrapper>
) : (
<TimersWrapper>
<CountdownCircleTimer
{...timerProps}
colors={[["#d87463"]]}
key={minutesKey}
duration={hourSeconds}
initialRemainingTime={workRemainingTime % hourSeconds}
onComplete={(totalElapsedTime) => {
return [workRemainingTime - totalElapsedTime > minuteSeconds];
}}
>
{({ elapsedTime }) =>
renderTime("minutes", getTimeMinutes(hourSeconds - elapsedTime))
}
</CountdownCircleTimer>
<TimerControl>
<Toggle
onChange={(event) => {
setChill(event.target.checked);
setSecondsKey((prevKey) => prevKey + 1);
setMinutesKey((prevKey) => prevKey + 1);
setTimerButtonDesc("Start");
setPlaying(false);
}}
/>
<TimerText>{chill ? "Chill" : "Work"} Timer </TimerText>
</TimerControl>
<CountdownCircleTimer
{...timerProps}
colors={[["#d87463"]]}
key={secondsKey}
duration={minuteSeconds}
initialRemainingTime={workRemainingTime % minuteSeconds}
onComplete={(totalElapsedTime) => {
if (totalElapsedTime - workRemainingTime === 0) {
db.collection("emails")
.doc(currentUser.email)
.update({
pomodoros: firebase.firestore.FieldValue.increment(1),
});
sound.play();
}
return [workRemainingTime - totalElapsedTime > 0];
}}
>
{({ elapsedTime }) =>
renderTime("seconds", getTimeSeconds(elapsedTime))
}
</CountdownCircleTimer>
</TimersWrapper>
)}
<ButtonsWrapper>
<RestartButton
onClick={() => {
setSecondsKey((prevKey) => prevKey + 1);
setMinutesKey((prevKey) => prevKey + 1);
setPlaying(false);
setTimerButtonDesc("Start");
}}
>
Restart Timer
</RestartButton>
<TimerCheck />
<StartStopButton
onClick={() => {
if (timerButtonDesc === "Start") {
setTimerButtonDesc("Stop");
} else {
setTimerButtonDesc("Start");
}
setPlaying(!playing);
}}
>
{timerButtonDesc}
</StartStopButton>
</ButtonsWrapper>
</CountdownTimerMain>
</CountdownTimerWrapper>
);
};
export default CountdownTimer;
解决方案
您遇到的问题是您将“key”设置为 minutesKey。每次您更改“键”时,计时器都会重置。如果重置不是跟随的一部分,您想传递一个常数。如果重置是流程的一部分,请为其设置单独的状态。
<CountdownCircleTimer
{...timerProps}
colors={[["#d87463"]]}
key={0}
duration={minuteSeconds}
initialRemainingTime={workRemainingTime % minuteSeconds}
onComplete={(totalElapsedTime) => {
if (totalElapsedTime - workRemainingTime === 0) {
db.collection("emails")
.doc(currentUser.email)
.update({
pomodoros: firebase.firestore.FieldValue.increment(1),
});
sound.play();
}
return [workRemainingTime - totalElapsedTime > 0];
}}
>
{({ elapsedTime }) =>
renderTime("seconds", getTimeSeconds(elapsedTime))
}
</CountdownCircleTimer>
推荐阅读
- c# - Loop-While 在不影响其他功能的设置超时内
- laravel - 除了 Laravel 中的主页 url,所有链接都不起作用
- javascript - 如何动态地将数组添加到对象?
- neo4j - Neo4j Cypher 查询:WHERE 子句中未考虑括号?
- apache - $_GET["foo"] 来自 RewriteRule 的 NULL
- typescript - 使用 typescript 编译器 API 以编程方式生成导入语句
- angular - 在 Angular 中使用 html2Pdf 导出 PDF
- java - 单击按钮后如何在所有recyclerview行中隐藏视图?
- html - 使用 v-for 遍历嵌套对象?
- angular - Angular 8:将对象传递给路由表