Actualmente estoy desarrollando una aplicación en React Native que incluye un cronómetro que se detiene cuando el giroscopio del teléfono detecta cierta cantidad de movimiento. Para hacer esto, estoy usando un setInterval para buscar actualizaciones en el giroscopio y, si se cumplen los requisitos, detener el temporizador. Sin embargo, el problema surge cuando setInterval se ejecuta generalmente 5-6 veces después de que clearInterval lo detenga y use un gancho para verificar si el juego ha comenzado. Actualmente, setInterval está configurado en 1 ms, pero aún tiene el mismo problema sin importar el intervalo, ya sea 1000 ms o 10000 ms.
const stopwatchINT = setInterval(() => { if (gameStarted) { if (data.x > 0.2) { clearInterval(stopwatchINT) let endTimer = performance.now() setTimeTook(Math.round(endTimer - startTimer) + 'ms') playSound() setContainer(WHITE) setGameStarted(false) setReactionScreenDisplay({'select': 'none','singleCreate': 'none', 'reactionGame': 'none', 'flash': 'none', 'timeTook': 'block'}) } } }, 1)No importa, he resuelto el problema. Para cualquiera que se quede atascado en esto, puede encerrar setInterval en un useEffect que fue lo que me estaba arrojando porque olvidé pasar los ganchos en la matriz. Por ejemplo:
useEffect(() => { if (isStart) { const timer = setInterval(() => { if (count > 0) { setCount(count - 1) } else { setCount('Times up'); clearInterval(timer); } }, 1000); } }, [isStart]);