Tengo un componente de reloj simple en mi sitio web, el código se proporciona a continuación:
import { useEffect, useState } from 'react' const Clock = () => { const [time, setTime] = useState() useEffect(() => { setInterval(() => { const dateObject = new Date() //` Date Object var currentTime = dateObject.getHours() + ' : ' + dateObject.getMinutes() setTime(currentTime) }, 1000) }, []) return <div>{time}</div> } export default Clock Pero en alguna otra página, estoy ejecutando un ciclo para borrar los tiempos de espera en esa página específica, pero lo que termina sucediendo es que mi intervalo de reloj también se borra. (Es muy importante borrar los tiempos de espera en esa página para la funcionalidad deseada, esto borra cualquier tiempo de espera que se esté ejecutando actualmente).
Código para el cual es:
const highestId = window.setTimeout(() => { for (let i = highestId; i >= 0; i--) { window.clearTimeout(i) } }, 0)Quiero mantener el intervalo del reloj funcionando pero también cancelar todos los demás.
Puede realizar un seguimiento de los ID de setTimeout o de setInterval y luego borrar solo los ID de tiempo de espera.
/* Make sure the timeoutIDs doesn't get reinitialised everytime you run this code, probably store it some central service that remains in memory, or declare it globally */ const timeoutIDs = []; const id = window.setTimeout(() => { for (let i = 0; i < timeoutIDs.length; i++) { window.clearTimeout(timeoutIDs[i]) } }, 0); timeoutIDs.push(id)O :
import { useEffect, useState } from 'react' export const IntervalSet = new Set(); const Clock = () => { const [time, setTime] = useState() useEffect(() => { const id = setInterval(() => { const dateObject = new Date() //` Date Object var currentTime = dateObject.getHours() + ' : ' + dateObject.getMinutes() setTime(currentTime) }, 1000) set.add(id); }, []) return <div>{time}</div> } export default Clock; import { IntervalSet } from 'somePath'; const highestId = window.setTimeout(() => { for (let i = highestId; i >= 0; i--) { if(IntervalSet.has(i)) { continue; } window.clearTimeout(i) } }, 0)