如何不让定时器停止在nextJS时闲置

Question

基本上，我用Next创建了一个简单的计时器应用程序

https://sitstandtimer.vercel.app/

我想让它一直计数，即使我不在浏览器窗口上。当我走到另一个窗口大约5分钟时，它停止计数，这是奇怪的行为。下面是Timer的代码:

const useTimer = (initialState = 0) => {
const [timer, setTimer] = useState(initialState)
const [isActive, setIsActive] = useState(false)
const [isPaused, setIsPaused] = useState(false)
const countRef = useRef(null)

const handleStart = () => {
setIsActive(true)
setIsPaused(true)
countRef.current = setInterval(() => {
setTimer((timer) => timer + 1)
}, 1000)
}

const handlePause = () => {
clearInterval(countRef.current)
setIsPaused(false)
}

const handleResume = () => {
setIsPaused(true)
countRef.current = setInterval(() => {
setTimer((timer) => timer + 1)
}, 1000)
}

const handleReset = () => {
clearInterval(countRef.current)
setIsActive(false)
setIsPaused(false)
setTimer(0)
}

return { timer, isActive, isPaused, handleStart, handlePause, handleResume, handleReset, setTimer }
}

Answer 1

已经在评论中回答了。设置时间间隔而不是添加1通常是更好的解决方案，因为浏览器可能会减慢或禁用后台间隔。

const useTimer = (initialTime = 0) => {
const [startTime, setStartTime) = useState(0);
const [timer, setTimer] = useState(initialState)
const [isActive, setIsActive] = useState(false)
const [isPaused, setIsPaused] = useState(false)
const countRef = useRef(null)
const startInterval = () => setInterval(() => {
setTimer((Date.now() - startTime) / 1000)
}, 1000)
}

const handleStart = () => {
setStartTime(Date.now())
setIsActive(true)
setIsPaused(true)
countRef.current = startInterval()

const handlePause = () => {
clearInterval(countRef.current)
setIsPaused(false)
}

const handleResume = () => {
setIsPaused(true)
countRef.current = startInterval()
}

const handleReset = () => {
clearInterval(countRef.current)
setIsActive(false)
setIsPaused(false)
setTimer(0)
}

return { timer, isActive, isPaused, handleStart, handlePause, handleResume, handleReset, setTimer }
}