具有暂停功能的React Native Countdown

Question

从一个教程开始，我正在尝试制作自己的倒计时计时器，我想添加一个暂停功能。它使用moment.js

const [time, setTime] = useState({
eventDate: moment.duration('00:00:06'),
days: 0,
hours: 0,
mins: 0,
secs: 0,
});
const updateTimer = () => {
const x = setInterval(() => {
let {eventDate} = time;

if (eventDate <= 0) {
clearInterval(x);
} else {
eventDate = eventDate.subtract(1, 's');
const days = eventDate.days();
const hours = eventDate.hours();
const mins = eventDate.minutes();
const secs = eventDate.seconds();
setTime({
days,
hours,
mins,
secs,
eventDate,
});
}
}, 1000);
};

一个简单的按钮，改变暂停的状态，这工作

const handlePause = () => {
{
!pause ? setPause(true) : setPause(false);
}
};

但没有停止使用效果

useEffect(() => {
if (pause) {
return;
} else {
updateTimer();
}
}, []);

也许一切都错了，但我对如何做没有其他想法。建议？谢谢

Answer 1

找到了！我添加了

const [intervalTime, setIntervalTime] = useState();

我把它设置在功能的末尾

const updateTimer = () => {
const x = setInterval(() => {
let {eventDate} = time;
if (eventDate <= 0) {
clearInterval(x);
} else {
eventDate = eventDate.subtract(1, 's');
const days = eventDate.days();
const hours = eventDate.hours();
const mins = eventDate.minutes();
const secs = eventDate.seconds();
setTime({
days,
hours,
mins,
secs,
eventDate,
});
}
}, 1000);
console.log('interval', x);
setIntervalTime(x); // set state
};

那么我在handlePause中使用clearInterval

const handlePause = () => {
{
!pause ? setPause(true) : setPause(false);
}
clearInterval(intervalTime);
};

刚刚添加的暂停具有相关性

useEffect(() => {
if (!pause) {
return;
} else if (pause) {
updateTimer();
}
}, [pause]);