Tengo dos funciones onclick que realizan funciones de inicio y detención usando socket cuando hago clic en iniciar, comienza a solicitar imágenes del servidor (estoy usando intervalos) cuando hago clic en detener, el servidor se detiene pero la solicitud sigue llegando al servidor. los intervalos parecen no detenerse después de hacer clic amablemente revise mi código
Código:
var interval; function onclick() { interval = setInterval(() => { socket.emit("get_image", "Click"); socket.on('send_image', (message) => { setImage(message.image); }); }, 350) } function onclicks() { clearInterval(interval); setImage(blanked); }He intentado agregar la función clearInterval pero parece que no funciona
Las variables declaradas en el nivel superior de un componente se vuelven a declarar en cada representación (aquí cada vez que llama a setImage() ), por lo que el interval no está definido por el momento en que se llama a onclicks() .
Para mantener el valor a través de los renderizados, debe usar el state ( useState ) o una ref ( useRef ) que no perderá su valor. En este caso, dado que no desea que los renderizados se adjunten al valor del interval una ref es más apropiada. useRef() devuelve un objeto con una propiedad current en la que se almacenará su valor.
const interval = React.useRef(null); function onclick() { interval.current = setInterval(() => { socket.emit("get_image", "Click"); socket.on('send_image', (message) => { setImage(message.image); }); }, 350); } function onclicks() { clearInterval(interval.current); interval.current = null; // reset the ref setImage(blanked); } Probablemente también desee evitar establecer múltiples intervalos. Es posible que ya lo esté haciendo, pero si no, puede verificar si el interval es nulo o no antes de establecer uno nuevo.
const interval = React.useRef(null); function onclick() { if (interval.current === null) { // only set new interval if interval ref is null interval.current = setInterval(() => { socket.emit("get_image", "Click"); socket.on('send_image', (message) => { setImage(message.image); }); }, 350); } }