Algunos cálculos y procesamiento en el navegador son mucho más caros que otros. Por ejemplo, las operaciones DOM requieren más memoria y tiempo de CPU que las interacciones no DOM. Intentar hacer demasiadas operaciones relacionadas con el DOM en sucesión puede hacer que el navegador cuelgue y, a veces, incluso se estrella. Esto es fácil de ocurrir, especialmente cuando se usa el controlador de eventos OnResize en IE. Cuando el navegador se redimensiona, el evento se activa continuamente. Si intenta realizar operaciones DOM dentro del controlador de eventos OnResize, sus cambios de alta frecuencia pueden bloquear el navegador.
La idea básica detrás de la función de la función es que cierto código no se puede ejecutar repetidamente sin interrupción. La primera vez que se llama la función, se crea un temporizador y el código se ejecuta después del intervalo de tiempo especificado. Cuando la función se llama el segundo temporizador, borra el temporizador anterior y establece otro. Si se ha ejecutado el temporizador anterior, esta operación no tiene sentido. Sin embargo, si el temporizador anterior no se ha ejecutado, en realidad se reemplaza con un nuevo temporizador. El propósito es ejecutar solo después de que la solicitud para ejecutar la función se haya detenido por un período de tiempo.
Funcion Throttle (Método, Contexto) {ClearTimeOut (Method.tid); método.tid = setTimeOut (function () {método.call (context);}, 100); }Ejemplo de aplicación:
Suponiendo que hay un elemento <div/> que necesita mantener su altura siempre igual a su ancho, se puede codificar de la siguiente manera:
function reseDiv () {var div = document.getElementById ("myDiv"); div.style.height = div.offsetwidth + "px"; } window.onResize = function () {Throttle (RESEDIV); }Aquí, la función de cambio de tamaño se coloca en una función separada llamada reseediv, y el controlador de eventos OnResize llama al acelerador () y se pasa en la función de reseic en lugar de llamar directamente a reseediv (). En la mayoría de los casos, los usuarios no pueden sentir el cambio, aunque los cálculos guardados en el navegador pueden ser muy grandes.
A continuación se muestran las adiciones de otros internautas
Hoy, escribimos principalmente sobre la función que necesitamos en nuestro trabajo diario. Es posible que algunos amigos no sean conscientes de la función de la función. De hecho, en el trabajo, muchos escenarios nos exigen a Trottp: //www.sub.com. Los más comunes son el cambio de tamaño de pantalla y los eventos de mmove o desplazamiento. ¡No sé si he leído los artículos que escribí antes! JQuery determina la dirección deslizante de la barra de desplazamiento de la página y Touchmove. Cuando use estos ejemplos, encontrará que la página sigue desencadenando touchmove o desplazamiento porque no hay necesidad de volver a pintar la página, por lo que no estoy usando la función JavaScript para estrangular aquí. Sin embargo, cuando usamos Window.enressed, el evento de cambio de tamaño se activará continuamente. Esto estará relacionado con el problema de repintado de la página. Por lo tanto, cuando cambie el tamaño de la ventana, ¡le recomendamos que use la limitación de funciones!
Introducción al aceleración de las funciones de JavaScript
Si te sientes abrumado por un gran texto sobre mí, no importa. ¡Te daré un breve ejemplo para ilustrar la función de estrangulamiento aquí! Por ejemplo, cuando usamos
$ (ventana) .resize (function () {console.log ("RESEA DE VENTANA DE HAOROOMS");})Encontrarás:
Se emitirá muchas veces aquí. ¡Simplemente estrechamos la ventana y seguirá actuando!
De esta manera, cuando se usa Div a menudo, la página se volverá a dibujar continuamente. Si te encuentras con una versión relativamente baja, ¡el navegador puede bloquear! Para evitar esto, podemos usar el método de estrangulamiento de funciones. La idea básica es: cuando se solicita la función por primera vez, creamos un temporizador, ejecutamos el código después del intervalo de tiempo especificado, y cuando se llama la segunda vez, entenderemos claramente el temporizador anterior y restableceremos uno. Si se ha ejecutado el temporizador anterior, esta operación no es intencional. Si el temporizador no se ha ejecutado, será reemplazado por un nuevo temporizador. El propósito es ejecutar la función después de que se haya detenido por un período de tiempo.
El método del objeto se puede escribir de la siguiente manera:
var haoroomStest = {timeOutId: null, interpretprocessing: function () {console.log ("cambiar el tamaño"); }, Process: function () {ClearTimeOut (this.TimeOutId); var que = esto; this.timeoutid = setTimeOut (function () {that.performProcessing ();}, 500)}}Después de esto, usamos:
$ (Window) .Resize (function () {haoomStest.process ();})
¡Esto reducirá las solicitudes, reducirá el redibujado de DOM y logrará el propósito de estrangular!
Otras formas de estrangulamiento de la función
Además de la forma en que usamos objetos, otros métodos y métodos de estrangulamiento de funciones también se introducen en línea y en la información. ¡Introduciré brevemente varios a continuación!
Método de función uno
Funcion Throttle (Método, Contexto) {ClearTimeOut (Method.tid); método.tid = setTimeOut (function () {método.call (context);}, 100); }Usamos
function reseDIV () {console.log ("harooms")} $ (ventana) .resize (function () {Throttle (reseediv)})¡El mismo efecto que el objeto anterior!
Método de función dos
También hay una forma más popular de prohibir el dinero en línea, ¡así que escribiré sobre él aquí!
Funcion Throttle (método, demora) {var timer = null; function de return () {var context = this, args = argumentos; ClearTimeOut (temporizador); timer = setTimeOut (function () {método.apply (context, args);}, demora); }}Entonces puedes escribir esto:
function reseDiv () {console.log ("haorooms")} window.onresize = Throttle (RESEDIV, 500);Nueva demanda
Cuando realizamos indicaciones de asociación inteligente de búsqueda difusa, uniremos el evento clave en la entrada. Pero no quiero activarlo con tanta frecuencia, por lo que habrá problemas utilizando el método anterior. Por lo tanto, la función anterior se cambia ligeramente, de la siguiente manera:
FUNCIÓN ALTO (Método, retraso, duración) {var Timer = null, begin = new Date (); Función de retorno () {var context = this, args = argumentos, actual = new Date () ;; ClearTimeOut (temporizador); if (current-begin> = duración) {método.apply (context, args); begins = actual; } else {timer = setTimeout (function () {método.apply (context, args);}, demora); }}}¡De esta manera, el desencadenante no será tan frecuente como antes!