Tengo una función de cronómetro en React que me gustaría detener después de 15 minutos. No estoy seguro de cómo usar clearInterval() en este caso:
const [timer, setTimer] = useState(0); const [isActive, setIsActive] = useState(false); const [isPaused, setIsPaused] = useState(false); const countRef = useRef(null); const lastUpdatedRef = useRef(null); const [minutes,setMinutes] = useState(0) const [seconds,setSeconds] = useState(0) const timeCeiling = 900; //maximum minutes is 15 const timeFloor = 60; //maximum seconds is 60 so it resets after useEffect(() => { if (timer < timeCeiling) { setMinutes(Math.floor(timer / 60)); setSeconds(timer % 60); } else { setMinutes(15); setSeconds(0); } }, [timer]); const handleStart = () => { setIsActive(true); setIsPaused(true); countRef.current = setInterval(() => { setTimer((timer) => timer + 1); }, 1000); lastUpdatedRef.current = setInterval(() => { setLastUpdated(Date.now()); }, 30000); }; El usuario hace clic en la función handleStart que desencadena un useEffect . También tiene una dependencia lastUpdated que activa otra función cada 30 segundos.
El reloj debe terminar después de las 15:00 pero aún continúa después. ¿Dónde debo poner clearInterval para que detenga el reloj después de 15 minutos? ¿O hay otra manera de hacer esto?
Lo colocaría en el useEffect que se ejecuta cada vez que se actualiza el timer . Borre el intervalo en la rama else cuando alcance el límite.
useEffect(() => { if (timer < timeCeiling) { setMinutes(Math.floor(timer / 60)); setSeconds(timer % 60); } else { clearInterval(countRef.current); setMinutes(15); setSeconds(0); } }, [timer]); También es posible que desee agregar un useEffect adicional para borrar los temporizadores en ejecución en caso de que el componente se desmonte antes de borrarlos manualmente.
useEffect(() => { return () => { clearInterval(countRef.current); clearInterval(lastUpdatedRef.current); }; }, []);Creo que deberías usar clearInterval en el bloque else en useEffect . Tal vez de esta manera:
else { setMinutes(15); setSeconds(0); clearInterval(countRef.current) // I hope this works }Puede agregar un intervalo de limpieza en la condición else:
useEffect(() => { if (timer < timeCeiling) { setMinutes(Math.floor(timer / 60)); setSeconds(timer % 60); } else { setMinutes(15); setSeconds(0); countRef.current && clearInterval(countRef.current); lastUpdatedRef.current && clearInterval(lastUpdatedRef.current); } }, [timer]);Y debe borrar el intervalo cuando se desmonte el componente:
useEffect(() => { return () => { countRef.current && clearInterval(countRef.current); }; }, [countRef]); useEffect(() => { return () => { lastUpdatedRef.current && clearInterval(lastUpdatedRef.current); }; }, [lastUpdatedRef]);