2 回答

TA貢獻(xiàn)1155條經(jīng)驗(yàn) 獲得超0個(gè)贊
目前您使用useState掛鉤來(lái)存儲(chǔ)區(qū)間參考。在每次重新渲染組件時(shí),App狀態(tài)fun都會(huì)被重置,但不會(huì)是對(duì)間隔的完全相同的引用。
而是使用useRef鉤子。它可以創(chuàng)建對(duì)間隔的引用,該間隔在重新渲染期間不會(huì)更改。這意味著引用屬性中的值current將始終完全相同。
最重要的是,使用useEffect鉤子來(lái)觀察何時(shí)設(shè)置或取消設(shè)置運(yùn)行狀態(tài),并根據(jù)該狀態(tài)啟動(dòng)和停止計(jì)時(shí)器。
import React, { useState, useRef, useEffect } from 'react'
export default function App() {
const [isRunning, setIsRunning] = useState(false);
const funRef = useRef(null);
const startTimer = () => {
if (!isRunning) {
setIsRunning(true);
}
};
const stopTimer = () {
if (isRunning && funRef.current !== null) {
setIsRunning(false);
}
};
useEffect(() => {
if (isRunning) {
funRef.current = setInterval(() => { // Save reference to interval.
// ...
}, 1000);
} else {
clearInterval(funRef.current); // Stop the interval.
}
}, [isRunning]);
// ...
}

TA貢獻(xiàn)1788條經(jīng)驗(yàn) 獲得超4個(gè)贊
在 useEffect 塊中添加間隔計(jì)時(shí)器,并在每次開(kāi)始更改時(shí)運(yùn)行此塊:
useEffect(()=> {
let timer = null;
if(!start) {
let sec = seconds;
timer = setInterval(() => {
console.log("akak:", sec);
if (sec <= 0) clearInterval(timer);
setSeconds(sec--);
}, 1000);
} else {
clearInterval(timer);
}
}, [start]);
const startTimer = () => {
setStartToggle(false);
};
const stopTimer = () => {
setStartToggle(true);
};
另外,我建議您使用確切的剩余時(shí)間。Javascript 是單線程語(yǔ)言,這個(gè)間隔可能超過(guò)一秒
編輯:使用確切的時(shí)間。
useEffect(() => {
let timer = null;
if (!start) {
let sec = seconds;
const startTime = Date.now();
timer = setInterval(() => {
const currentTime = Date.now();
sec = sec - Math.floor((currentTime - startTime) / 1000);
if (sec < 0) {
clearInterval(timer);
setSeconds(0);
} else {
setSeconds(sec);
}
}, 1000);
}
}, [start]);
添加回答
舉報(bào)