¿Qué es antivibración y acelerador?
"Antivibración"
Escenario: Al ingresar el nombre, vaya al servidor para verificar si el nombre está duplicado. Si el código no está restringido, ingrese una solicitud una vez; ingrese varias veces para activar el evento
La función de devolución de llamada se ejecuta después de que el evento se dispara n segundos, y si se dispara nuevamente dentro de n segundos, el temporizador se vuelve a cronometrar
Supongamos una escena: el mouse se mueve sobre un div para activar el evento onmousemove, y el texto dentro de él mostrará las coordenadas actuales del mouse.
Anti-vibración: Función anti-vibración, donde el jitter es el significado de la ejecución, y el jitter general es continuo, varias veces. Suponiendo que la función continúa ejecutándose varias veces, queremos que se calme y se ejecute nuevamente. Es decir, cuando el evento se dispara continuamente, la función no se ejecuta en absoluto y se ejecuta después de un período de tiempo después de que finaliza el último disparador.
Desglose los requisitos:
- La activación continua no se ejecuta
- Ejecutar después de un período de no activación
Entonces, ¿cómo lograr los objetivos anteriores?
- Si se ejecuta dentro del tiempo no activado, entonces se necesita un temporizador,
- Llame a la función que queremos ejecutar en el temporizador, pase argumentos, encapsule una función, deje que el evento activado continuamente escuche la función que encapsulamos y pase la función de destino como devolución de llamada, se logra el segundo punto ,
- Mire el primer punto: la activación continua no se ejecuta. Pensemos primero, ¿qué hace que nuestra función se ejecute? Es setTimeout arriba.
- OK, entonces el problema ahora se convierte en disparo continuo, y no puede establecerse Timeout, de modo que cuando se continúa el disparo continuo, se borra el temporizador .
"Acelerador"
La aceleración se utilizará en la entrada y el teclado para desencadenar eventos como cambiar el tamaño y mover con mayor frecuencia. La limitación forzará a la función a ejecutarse a una velocidad fija. El concepto de estrangulamiento se puede imaginar como una presa. Usted construyó una presa en el canal de un río. No puede dejar que el agua fluya. En otras palabras, no puede permitir que no se ejecuten los métodos del usuario. Si lo hace, es "anti-vibración".
La limitación significa que la función se ejecuta de manera controlada, en lugar de ejecutarse una vez sin desencadenar sin control. ¿Qué es la templanza? Se activa una vez en un período de tiempo.
Desglose los requisitos:
- La activación continua no se ejecuta varias veces
- Para ejecutar en un momento determinado
Entonces, ¿cómo lograr los objetivos anteriores?
- Se activa continuamente y no se ejecutará, pero se ejecutará cuando se acabe el tiempo. Coge un punto clave " hora de ejecutar " .
- Para controlar el tiempo de ejecución, podemos hacerlo a través de un interruptor, combinado con el temporizador setTimeout.
- El requisito previo para la ejecución de la función es que el interruptor se abra, y cuando se continúa el disparador, el interruptor se cierra continuamente.
- Espere hasta que se acabe el tiempo setTimeout y luego encienda el interruptor , la función se ejecutará.
Nota: El resultado de la ejecución de la función del acelerador aquí es la llamada de su función de retorno interna, lo que significa que el monitoreo del evento por el mouse es en realidad esta función devuelta, y es activada continuamente por ella.
La función del acelerador solo proporciona un alcance, y el cierre interno declara una variable de interruptor de ejecución.
Dado que la ejecución de cierre variable siempre existirá y no se destruirá, y dejar que run = true solo se declare una vez en este cierre (ámbito local), pero no se ejecutará continuamente, por lo que el juicio interno de la función de retorno No será sobrescrito por él.
Resumen:
Anti-shake and estrangulamiento utiliza inteligentemente setTimeout para controlar el tiempo de ejecución de la función. Las ventajas son obvias, el rendimiento se puede guardar, y la lógica de negocios compleja no se puede activar muchas veces y causar paradas de página.
Adjunte el código completo:
<! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Title </ title > </ head > < style > #container { width : 500px ; altura : 200 px ; fondo : #ccc ; tamaño de fuente : 20px ; alinear texto :centro ; altura de línea : 200 px ; } </ style > < body > < div id = "container" > </ div > </ body > < script > // 防抖 function debounce (func, delay) { let timeout; función return () { clearTimeout (timeout) timeout = setTimeout (() => { func.apply ( this , argumentos) }, delay) } } const container = document.querySelector ( ' div ' ); // Método de llamada container.onmousemove = debounce ( function (e) { container.innerHTML = `clientX = $ {e.clientX}, clientY $ {e.clientY}` }, 1000 ); // acelerador función del acelerador (FUNC, Delay) { let RUN = true ; la console.log ( ' cuando una disparada ' , RUN); retorno función () { el console.log ( 'return function content ' , run); if ( ! run) { return false // Si el switch está cerrado, el siguiente código no se ejecutará } console.log ( ' Después de juzgar si el switch está cerrado o no ' , run); run = false ; // Si continúa disparándose, la ejecución siempre es falsa, se detendrá en el juicio superior console.log ( 'Después de que se apague el interruptor ' , ejecute); setTimeout (() => { func.apply ( esto , argumentos); run = true ; console.log ( 'Después de encender el interruptor ', correr); }, delay) } } const container = document.querySelector ( ' div ' ); // 调用 方法 container.onmousemove = acelerador ( función (e) { container.innerHTML = `clientX = $ {e.clientX}, clientY $ {e.clientY}` }, 1000 ); </ script > </ html >