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.
this.controller.abort();
.