Dos estrategias para controlar la frecuencia de activación de eventos: antirrebote y aceleración
En nuestro desarrollo diario, las siguientes situaciones desencadenarán eventos con alta frecuencia:
Los eventos desencadenantes de alta frecuencia consumirán excesivamente el rendimiento de la página, provocando que la página se congele, especialmente Jitter. cuando estas funciones de devolución de llamada de eventos contienen operaciones asincrónicas como ajax, múltiples activadores harán que los resultados del contenido devuelto sean inconsistentes en orden, lo que dará como resultado resultados que no son los resultados correspondientes al último evento desencadenante.
Antirrebote: Un ascensor se detiene en un determinado piso cuando una persona entra, cerrará automáticamente la puerta después de 20 segundos. Durante los 20 segundos de espera, otra persona presiona el botón para entrar al ascensor. Durante los 20 segundos se volverá a abrir Calculado, no se responde al evento hasta el momento en que se cierra el ascensor.
Acelerador: Al igual que una máquina automática de bebidas, presione el botón de café con leche durante el proceso de dispensación de bebidas, no importa cuántas veces se presione este botón, las bebidas no se dispensarán de forma continua y la respuesta del acelerador. Se ignorará el botón central. Debe esperar hasta que se haya dispensado toda la capacidad de esta taza antes de presionar el botón de café con leche para dispensar la siguiente taza.
Aquí utilizamos los métodos de debouce y throttle implementados en la biblioteca Lodash.
Lodash admite encapsulación personalizada. Utilice los dos comandos siguientes para encapsular nuestra propia biblioteca lodash.
El método de llamada antirrebote: _.debounce(func, [wait=0], [options={}]) devuelve una nueva función con una estrategia antirrebote.
Método de aceleración: _.throttle(func, [wait=0], [options={}]) devuelve una nueva función con estrategia de aceleración.
El siguiente ejemplo es una función comúnmente utilizada cuando se usa el diseño rem en el terminal móvil. Escucha el evento de cambio de tamaño y cambia el tamaño de fuente del elemento raíz. En este caso, se aplica la estrategia antirrebote. p>
En este ejemplo, usando la estrategia de aceleración, un clic genera una línea de texto No importa cómo haga clic en 1 segundo, solo se genera una línea de texto:
Dirección de demostración completa: demostración
debounce.js
throttle.js