Estoy trabajando en un juego simple usando React y encontré un problema. Entonces, cada vez que presiona WAS o D, comienza un intervalo. Lo que quiero es que cada vez que el usuario presione una tecla, el intervalo anterior se borre antes de comenzar el siguiente para que solo se ejecute un intervalo a la vez.
export default function useGame() { const [xpos, setXpos] = useState(250) const [ypos, setYpos] = useState(250) const [intervalID, setIntervalID] = useState(null) const handleKeypress = (e) => { let id = setInterval(() => { if (e.key === "w") { setYpos((prev) => { return (prev -= 5) }) } if (e.key === "s") { setYpos((prev) => { return (prev += 5) }) } if (e.key === "a") { setXpos((prev) => { return (prev -= 5) }) } if (e.key === "d") { setXpos((prev) => { return (prev += 5) }) } }, 100) setIntervalID(id) } return { handleKeypress, xpos, ypos, intervalID } //Component file export default function Game() { const { handleKeypress, xpos, ypos, intervalID } = useGame() useEffect(() => { window.addEventListener("keypress", (e) => { console.log(intervalID) if (intervalID) { clearInterval(intervalID) } handleKeypress(e) }) return () => { window.removeEventListener("keypress", null) } }, []) return ( <div className="character" style={{ position: "absolute", left: `${xpos}px`, top: `${ypos}px`, }} ></div> ) }Intenté almacenar el ID de intervalo en el estado, pero siempre está indefinido en otras funciones u otras partes del código. ¿Cómo harían ustedes para resolver esto?
Debe almacenar el ID de intervalo devuelto por setInterval y pasarlo a clearInterval cada vez que desee borrar ese intervalo.
function App() { const [count, setCount] = useState(0); const [intervalId, setIntervalId] = useState(null); const startCounting = () => { const id = setInterval(()=>{ setCount(prevCount => prevCount + 1); }, 1000); setIntervalId(id); } return (<div> <div>{count}</div> <button onClick={startCounting}>Start Interval</button> <button onClick={()=>clearInterval(intervalId)}>Stop Interval</button> </div>); } En su pregunta, ha creado un intervalo separado según cada condición, y cada intervalo tendrá una identificación de intervalo diferente. así que es mejor poner todas las condiciones en un solo setInterval y devolver su ID de intervalo.
import { useState } from "react" export default function useGame() { const [xpos, setXpos] = useState(250) const [ypos, setYpos] = useState(250) const [intervalId, setIntervalId] = useState(null); const handleKeypress = (e) => { const id = setInterval(() => { if (e.key === "w") { setYpos((prev) => { return (prev -= 5) }) } if (e.key === "s") { setYpos((prev) => { return (prev += 5) }) } if (e.key === "a") { setXpos((prev) => { return (prev -= 5) }) } if (e.key === "d") { setXpos((prev) => { return (prev += 5) }) } }, 100); setIntervalId(id); } return { handleKeypress, xpos, ypos, intervalId } }import { useState } from "react" export default function useGame() { const [intervalId, setIntervalId] = useState(Number(0)); const [xpos, setXpos] = useState(250) const [ypos, setYpos] = useState(250) const handleKeypress = (e) => { if (e.key === "w") { if(intervalId > 0) { clearInterval(intervalId); } let id = setInterval(() => { setYpos((prev) => { return (prev -= 5) }) }, 100) setIntervalId(Number(id)); } if (e.key === "s") { if(intervalId > 0) { clearInterval(intervalId); } let id = setInterval(() => { setYpos((prev) => { return (prev += 5) }) }, 100) setIntervalId(Number(id)) } if (e.key === "a") { if(intervalId > 0) { clearInterval(intervalId); } let id = setInterval(() => { setXpos((prev) => { return (prev -= 5) }) }, 100) setIntervalId(Number(id)) } if (e.key === "d") { if(intervalId > 0) { clearInterval(intervalId); } let id =setInterval(() => { setXpos((prev) => { return (prev += 5) }) }, 100) setIntervalId(Number(id)) } } return { handleKeypress, xpos, ypos } }