Función de aceleración en JavaScript

La función Throttle se puede utilizar para ejecutar una función más de una vez cada X milisegundos. La principal diferencia entre la función Debounce y la función Throttle es que la función Throttle garantiza la ejecución de la función cada X milisegundos.

En este tutorial, crearemos una función Throttle y veremos la demostración en vivo para comprender que está funcionando.

Considere el siguiente código HTML.

< button id = “sayHello” onclick = “sayHello ()” > Haz clic en mí < / button >

Y el siguiente código JavaScript.

const sayHello = ( ) => {

  consola.
log ( “Ha hecho clic en un botón” ) ;
} ;

Si hace clic en el botón digamos 100 veces en un minuto, la función sayHello () se llamará 100 veces.

Al usar la función Throttle, podemos limitar el número de llamadas a funciones. Por ejemplo, si agregamos el acelerador de 2 segundos, la función se llamará cada 2 segundos a pesar de la cantidad de clics.

Aquí está nuestra función Throttle. Nuestra función acepta dos argumentos, el primer argumento es la función a ejecutar y el segundo argumento es el retraso.

const throttle = ( fn , delay ) => {

  let lastCalled
= 0 ;
  return (args ) => {

    dejar ahora
= nueva fecha ( ) . getTime ( ) ;
    if ( ahora lastCalled < retraso ) {
      return ;
    }

    lastCalled
= ahora ;
    return fn (argumentos ) ;
  }
}

Cuando se llama a la función de aceleración, verificamos si la diferencia de tiempo entre la llamada actual y la última llamada es mayor que la demora asignada por la función de llamada.

Si es mayor que el retraso, simplemente ejecutamos la función asignada, si es menor que el retraso, no hacemos nada.

Así es como llamamos a la función Throttle.

const printMessage = ( ) => {

  consola.
log ( “Ha hecho clic en un botón” ) ;
} ;

const sayHello = acelerador ( printMessage , 2000 ) ;

Ahora, si hace clic en el botón, digamos 100 veces en un minuto, el acelerador llamará a la función cada 2 segundos. Para ver la demostración, consulte el lápiz a continuación.

Te recomiendo que abras el bolígrafo y revises los mensajes en la consola.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.