1

Tengo un calendario, y cuando hago hover en uno de sus dias ejecuto una funcion.

this.onHoverCell = async day => {
      try {
        if (day) {
          this.setState({
            resultSingleDay: {
              day,
              loading: true,
              result: false,
            },
          });
          const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
          const data = res.json();
          this.setState({
            resultSingleDay: {
              day,
              loading: false,
              result: true,
            },
          });
        }
      } catch (error) {
        console.log('error');
      }
    };

Mi cuestion es la siguiente: Si yo paso el mouse por encima de un dia, la funcion se ejecuta. Pero es posible que una persona mueva el mouse rapido y ejecute la funcion multiples veces.

Yo quiero que cuando la funcion sea llamada nuevamente, no espere que termine la llamada anterior, sino que la corte y ejecute la llamada actual. Es posible esto?

En el componente hijo, asi es como se llama a la funcion anterior

    <button
      type="button"
      onMouseEnter={() => this.props.onHoverCell(this.props.day)}
     />

Intenté poner un debounce de esta manera

onMouseEnter={debounce(() => this.props.onHoverCell(this.props.day), 200)}

pero el problema persiste. Entonces buscaba la forma de asesinar cualquier funcion que este esperando ser resuelta, si es llamada nuevamente.

5
  • Quizás esta pregunta te sirva de ayuda stackoverflow.com/questions/23123138/how-to-perform-debounce Commented el 9 feb. 2023 a las 20:22
  • @AndresGardiol excelente, no conocia eso. Funciona perfecto, el tema es que no se exactamente donde poner this.controller.abort();.
    – Agustin G.
    Commented el 9 feb. 2023 a las 20:32
  • creo que cambiaste el link de la pregunta, no? voy a revisar en esto que me pasaste tambien, es react 14 asi que nada de hooks :/
    – Agustin G.
    Commented el 9 feb. 2023 a las 20:36
  • @AndresGardiol crack, me anduvo perfecto la solucion con esta libreria: github.com/slorber/awesome-debounce-promise Muchas gracias!
    – Agustin G.
    Commented el 9 feb. 2023 a las 20:54
  • Si, actualicé el link. Perfecto! Si te parece responde tu propia pregunta para ayudar a otros usuarios de SO en español Commented el 10 feb. 2023 a las 0:22

1 respuesta 1

1

El usuario Andres Gardiol me compartio en los comentarios una pregunta del sitio en ingles, y de ahi saque lo que necesitaba, aunque tuve que hacer un doble debounce para lograr el resultado esperado:

Instalé esta libreria en mi proyecto https://github.com/slorber/awesome-debounce-promise con npm install awesome-debounce-promise --save

Importo la libreria:

import AwesomeDebouncePromise from 'awesome-debounce-promise';

En el constructor del componente (es react 14):

this.searchAPI = () => fetch('https://jsonplaceholder.typicode.com/todos/1');
const searchAPIDebounced = AwesomeDebouncePromise(this.searchAPI, 500);

// esta funcion usa un debounce cuando obtengo res 
// (ejecuta las dos lineas que estan arriba de este comentario)
this.onHoverCell = async day => {
  try {
    if (day) {
      this.setState({
        resultSingleDay: {
          day,
          loading: true,
          result: false,
        },
      });
      const res = await searchAPIDebounced();
      const data = res.json();
      this.setState({
        resultSingleDay: {
          day,
          loading: false,
          result: true,
        },
      });
    }
  } catch (error) {
    console.log('error');
  }
};

Y finalmente defino la funcion que voy a pasar al componente hijo, encargada de ejecutarse cuando se haga hover en un boton:

this.asyncFunctionDebounced = AwesomeDebouncePromise(this.onHoverCell, 50);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.