0

que tal? estoy usando el componente Slider de Primevue (https://primefaces.org/primevue/showcase/#/slider) y yo quiero que, al actualizar el valor, este se guarde en el state. Ocurre correctamente, pero si yo arrastro de un valor hasta el otro, se ejecuta la función que actualiza el valor, por cada uno de los valores interiores. Es decir, si yo corro el slide de 1 a 100, la función se ejecuta 99 veces.

Alguna vez vi una función llamada debounce en react pero no recuerdo como funciona, y queria ver si me daban una mano con eso.

<Slider
      v-model="roofedSurface"
      :max="100000"
      :min="0"
      :range="true"
      :slideend="actualizarSuperficieCubierta()"
    />

Esta es la funcion actualizarSuperficieCubierta()

  const actualizarSuperficieCubierta = () => {
      const data = [{
        compare: ">=",
        valor: roofedSurface.value[0],
      },{
        compare: "<=",
        valor: roofedSurface.value[1]
      }];
      store.dispatch('filtros/roofedSurfaceAction', data)
    };

Yo quisiera que la función espere a que terminen todas las llamadas, y luego se ejecute una sola vez. Agradezco cualquier sugerencia.

1 respuesta 1

0

Logré hacerlo de la siguiente manera:

saqué esta función de https://ourcodeworld.co/articulos/leer/16/que-es-el-metodo-debounce-debouncing-y-como-usarlo-en-javascript

const debounce = (func, wait, immediate) => {
     var timeout;
     return function() {
         var context = this, args = arguments;
         var later = function() {
                 timeout = null;
                 if (!immediate) func.apply(context, args);
         };
         var callNow = immediate && !timeout;
         clearTimeout(timeout);
         timeout = setTimeout(later, wait);
         if (callNow) func.apply(context, args);
     };

Y luego le paso la funcion actualizarSuperficieCubierta como argumento a la funcion debounce y guardo eso en una variable.

const actualizarSuperficieCubierta = debounce(() => {
  const data = [{
    compare: ">=",
    valor: roofedSurface.value[0],
  },{
    compare: "<=",
    valor: roofedSurface.value[1]
  }];
  store.dispatch('filtros/roofedSurfaceAction', data)
  console.log('asd')
},500)

Y eso hace que la carga se realice unicamente 500 milisegundos despues que no ocurra otra llamada. Lo que me asegura hacer una única llamada. No se qué tan óptimo es pero hace lo que esperaba.

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.