0
121
VistasReaccionar: ClearInterval e inmediatamente comenzar de nuevo
Tengo un componente que activa un temporizador que se actualiza y realiza una solicitud de axios cada 30 segundos. Utiliza un useRef que está configurado para actualizarse cada 30 segundos tan pronto como se activa una función handleStart .
const countRef = useRef(null); const lastUpdatedRef = useRef(null); const [lastUpdated, setLastUpdated] = useState(Date.now()) const handleStart = () => { countRef.current = setInterval(() => { setTimer((timer) => timer + 1); }, 1000); lastUpdatedRef.current = setInterval(() => { setLastUpdated(Date.now()); }, 30000); }; Ahora tengo un useEffect que ejecuta una función de calculate cada 30 segundos cada vez que lastUpdated se activa como una dependencia:
const firstCalculate = useRef(true); useEffect(() => { if (firstCalculate.current) { firstCalculate.current = false; return; } console.log("calculating"); calculateModel(); }, [lastUpdated]); Esto actualiza la función de calculate cada 30 segundos (00:30, 01:00, 01:30, etc.) según lastUpdatedRef . Sin embargo, quiero que el temporizador se lastUpdated cuando el estado de la última actualización se haya modificado en otro lugar (por ejemplo, si la lastUpdated actualización se modificó a las 00:08, la próxima actualización será a las 00:38, 01:08, 01:38, etc.). ¿Hay alguna forma de hacer esto?
1 Respuestas
Responde la pregunta0
Básicamente, parece que solo necesita otro controlador para borrar y reiniciar el intervalo de 30 segundos actualizando el estado lastUpdated .
Ejemplo:
const handleOther = () => { clearInterval(lastUpdatedRef.current); lastUpdatedRef.current = setInterval(() => { setLastUpdated(Date.now()); }, 30000); }Ejemplo completo:
const calculateModel = () => console.log("calculateModel"); export default function App() { const countRef = React.useRef(null); const lastUpdatedRef = React.useRef(null); const [lastUpdated, setLastUpdated] = React.useState(Date.now()); const [timer, setTimer] = React.useState(0); const handleStart = () => { countRef.current = setInterval(() => { setTimer((timer) => timer + 1); }, 1000); lastUpdatedRef.current = setInterval(() => { setLastUpdated(Date.now()); }, 30000); }; const handleOther = () => { clearInterval(lastUpdatedRef.current); lastUpdatedRef.current = setInterval(() => { setLastUpdated(Date.now()); }, 30000); }; const firstCalculate = React.useRef(true); React.useEffect(() => { if (firstCalculate.current) { firstCalculate.current = false; return; } console.log("calculating"); calculateModel(); }, [lastUpdated]); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <div>Timer: {timer}</div> <button type="button" onClick={handleStart}> Start </button> <button type="button" onClick={handleOther}> Other </button> </div> ); } 
¡No olvide borrar los intervalos de ejecución cuando se desmonte el componente!
React.useEffect(() => { return () => { clearInterval(countRef.current); clearInterval(lastUpdatedRef.current); }; }, []);