JavaScript Optimización de rendimiento de la función de aceleración y función de funciones

La función de la función, en pocas palabras, hace que una función no pueda llamarse continuamente dentro de un intervalo de tiempo muy corto. Solo cuando se ha ejecutado la última función después del intervalo de tiempo especificado por usted, puede realizar la siguiente llamada a la función.

El principio del estrangulamiento de la función es bastante simple. Supongo que todos lo han pensado, ese es el temporizador. Cuando activo una hora, primero setTimout para retrasar el evento por un tiempo antes de la ejecución. Si el evento se activa nuevamente dentro de este intervalo de tiempo, entonces borrosamos el temporizador original y luego en el tiempo de asentamiento de un nuevo temporizador para retrasar la ejecución por un tiempo, eso es todo.

En los siguientes escenarios, los siguientes escenarios a menudo realizan comportamientos pesados, como operaciones DOM y carga de recursos, lo que hace que la interfaz de usuario haga una pausa o incluso los bloqueos del navegador.

1. Cambiar y desplazar los eventos del objeto de la ventana

2. Evento de MouseMove durante el arrastre

3. Mousedown y eventos clave en juegos de tiro

4. Eventos clave que se completan automáticamente por la entrada de texto

De hecho, para el evento de cambio de tamaño de la ventana, el requisito real es dejar de cambiar el tamaño N milisegundos y realizar el procesamiento posterior; mientras que la mayoría de los otros eventos requieren un procesamiento posterior a una cierta frecuencia. Hay dos soluciones a estas dos necesidades, el debilidad y el acelerador.

Throttle and Leapote son dos soluciones para resolver el problema de la solicitud y el desajuste de la velocidad de respuesta. La diferencia entre los dos radica en elegir diferentes estrategias.

Ejecutar funciones a intervalos como acelerador.

Si el evento se desencadena nuevamente dentro del intervalo de desbloqueo t, el temporizador se volverá a decir hasta que el tiempo de parada sea mayor o igual a t.

1. Implementación simple de la función del acelerador

 FUNCIÓN ALTO ALTO (FN, TRESHHOLD, ALCANCE) {Threshhold || (Threshhold = 250); var ulty, temporizador; Función de retorno () {var context = alcance || este; var ahora = +nueva fecha (), args = argumentos; if (last && Now - Last + Threshhold <0) {// Espárdico en ClearTimeOut (DeferTimer); timer = setTimeOut (function () {last = now; fn.apply (context, args);}, umbreshold); } else {last = ahora; fn.apply (contexto, args); }};}

Métodos de llamadas

 $ ('Body'). On ('MouseMove', Throttle (function (Event) {Console.log ('tick');}, 1000));

2. Implementación simple de la función de debaldad

 function debupe (fn, demora) {var timer = null; function de return () {var context = this, args = argumentos; ClearTimeOut (temporizador); timer = setTimeOut (function () {fn.apply (context, args);}, demora); };}

Métodos de llamadas

 $ ('input.Username'). KeyPress (Debuncia (función (evento) {// Do la solicitud AJAX}, 250));

3. Implementación simple de envasado

 /** * acelerador * @param fn, Wait, debuncia */var Throttle = function (fn, wait, debuncia) {var timer = null, // timer t_last = null, // Último conjunto de tiempo, // context args, // parámetro diff; // Diferencia de tiempo return Funciton () {var curr = + new Date (); contexto var = this, args = argumentos; ClearTimeOut (temporizador); if (debuncia) {// if es el timer de desbloque = setTimeOut (function () {fn.apply (context, args);}, espera); } else {// Si es acelerador if (! t_last) t_last = curr; if (curr - t_last> = wait) {fn.apply (context, espera); context = wait = null; }}} ial

Resumen: estos dos métodos son adecuados para algunos eventos que se activarán repetidamente, como: MouseMove, Keydown, KeyUp, KeyPress, Scroll, etc.

Si solo ata eventos nativos y no los controla, el navegador estará tartamudeado y la experiencia del usuario será pobre. Para mejorar el rendimiento de JS, se recomienda utilizar el acelerador de funciones o el debaldad de funciones para controlar cuando se usa los eventos anteriores y similares.

4. Análisis del código fuente relacionado con el bajo v1.7.0

1. _.

 _.throttle = function (func, wait, options) {var context, args, resultado; VAR TIMEOUT = NULL; // temporizador var anterior = 0; // Tiempo último activado if (! Options) options = {}; var más tarde = function () {anterior = options.leading === falso? 0: _.now (); tiempo de espera = nulo; resultado = FunC.Apply (contexto, args); if (! timeOut) context = args = null; }; function de return () {var ahora = _.now (); // si ejecutar if (! Anterior && options.leading === false) anterior = ahora; // Aquí hay un concepto de restante: ¿cuánto tiempo le queda el tiempo para ejecutar el evento var restante = espera - (ahora - anterior); contexto = esto; args = argumentos; // restante <= 0 Teniendo en cuenta que el evento está en referencia después de detener el evento o // cuando la espera es exactamente diferente, el evento se activará de inmediato // permanece> esperar no tener en cuenta el escenario correspondiente // porque ahora previoso siempre es positivo y no 0, entonces // Returante será más pequeño de lo que espera, y no hay mayor de lo que espera // que se estima que es seguro, y esta situación será segura, y esta situación será segura, y esta situación se ejecutará de inmediato (restante, siempre se ejecutará de inmediato. restante> esperar) {if (timeOut) {clareTimeOut (timeout); tiempo de espera = nulo; } anterior = ahora; resultado = FunC.Apply (contexto, args); if (! timeOut) context = args = null; // si rastrear} else if (! TimeOut && options.trailing! == false) {timeOut = setTimeOut (más tarde, restante); } resultado de retorno; };};

Como se puede ver de lo anterior, el bajo valor ha considerado más situaciones: opciones. LEADING:

La primera vez se ejecuta, el valor predeterminado es verdadero, lo que significa que se ejecutará la primera vez. Las opciones de ejecución por primera vez. Eliraling está deshabilitado: la última vez se ejecuta, el valor predeterminado es verdadero, lo que significa que la última vez se ejecutará. La última vez se pasa {siguiendo: falso} significa que la última vez no se ejecuta. La llamada primera vez es si el evento se ejecuta primero. Cuando se acaba de comenzar el evento, si el evento debe activarse primero. Si lo desea, anterior = 0, y el resto es negativo, la llamada última vez si la función se ejecuta inmediatamente después de que termine el evento. Este método se activa la última vez. Si desea ejecutar, se establece un temporizador, es decir, debe ejecutarse una vez después de que termine el evento. Remianing> Wait significa que el tiempo del cliente ha sido modificado.

2.

 _.deBounce = function (func, wait, inmediato) {// El valor predeterminado inmediato es falso var tiempo, args, contexto, timestamp, resultado; var más tarde = function () {// Cuando la función devuelta por _.debote se llama varias veces durante el intervalo de tiempo especificado por Wait, el valor de la marca de tiempo se actualizará continuamente, lo que resulta en el último <Wait && Last> = 0 siempre es verdadero, comenzando constantemente un nuevo temporizador para la ejecución de retraso de la función Var Last = _.Now () - TimestAMP; if (last <wait && last> = 0) {timeOut = setTimeOut (más tarde, espera - last); } else {timeOut = null; if (! inmediato) {result = FunC.Apply (contexto, args); if (! timeOut) context = args = null; }}}; Función de retorno () {context = this; args = argumentos; timestamp = _.now (); // Cuando el método se llama la primera vez e inmediatamente después del intervalo de tiempo especificado por Wait, el temporizador se inicia a llamar a la función func if (! TimeOut) Timeout = setTimeOut (más tarde, espera); if (callNow) {result = FUnc.Apply (context, args); context = args = nulo; } resultado de retorno; };};

Creo que lo maravilloso de la implementación de _.debuncion es iniciar el temporizador de manera recursiva en lugar de ajustar la ejecución de retraso de las funciones de FUNC llamando a ClearTimeOut.

Lo anterior es la función de optimización de rendimiento de JavaScript y la función de desbloqueo que el editor le presentó. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!