La función más básica de JavaScript en las páginas web es escuchar o responder a las acciones del usuario, lo cual es muy útil. Las acciones de algunos usuarios son muy frecuentes, mientras que otras son muy raras. Algunas funciones del oyente se ejecutan como un rayo, mientras que otras son pesadas para arrastrar el navegador hasta la muerte. Tome el evento de cambio de tamaño de la ventana del navegador, por ejemplo. Este evento se activará una vez en cada cambio de escala en el tamaño de la ventana del navegador. Si el oyente es grande, su navegador será arrastrado hacia abajo pronto.
Obviamente, no podemos permitir que el navegador sea arrastrado hacia abajo, pero no podemos eliminar al oyente. Sin embargo, podemos limitar la frecuencia de las llamadas de función y debilitar el impacto de la operación de la función del evento. En comparación con dejar que el cambio de tamaño de la ventana active la función del oyente una vez, ahora podemos escuchar el intervalo mínimo de desencadenar la función que debe ser mayor que cuántos milisegundos, de modo que mantenga un canal de llamadas razonable y garantice que la experiencia del usuario no destruya. Hay una buena biblioteca de herramientas JS llamada Underscore.js, que tiene un método simple que le permite crear fácilmente oyentes que reducen la frecuencia de las funciones de eventos que se activan.
Código JavaScript
El código para el oyente de Sownswitch es simple:
La copia del código es la siguiente:
// Crear un oyente
var updateLayOut = _.deBounce (function (e) {
// realiza toda la actualización del diseño aquí
}, 500); // corre una vez cada 500 milisegundos al menos
// Agregar el oyente del evento
Window.AdDeventListener ("RESIZAR", UPDATATELAYOUT, FALSO);
... La capa subyacente de este código subrayado.js en realidad está utilizando el intervalo para verificar la frecuencia de las llamadas de la función del evento:
// Devuelve una función, que, mientras se siga invocando, no
// ser activado. Se llamará a la función después de que deje de ser llamado
// n milisegundos. Si se pasa 'inmediato', active la función en el
// borde de ataque, en lugar del final.
_.deBounce = function (func, wait, inmediato) {
Tiempo de espera var;
Función de retorno () {
contexto var = this, args = argumentos;
var más tarde = function () {
tiempo de espera = nulo;
if (! inmediato) func.apply (contexto, args);
};
var callnow = inmediato &&! TimeOut;
ClearTimeOut (tiempo de espera);
tiempo de espera = setTimeOut (más tarde, espera);
if (callnow) func.apply (contexto, args);
};
};
El código no es particularmente complicado, pero también es un tipo de felicidad no tener que escribirlo usted mismo. Esta función de debaldad no depende de otras funciones de subscore.js, por lo que puede agregar este método a su biblioteca de herramientas JS favorita, como jQuery o mootols, lo cual es fácil:
La copia del código es la siguiente:
// mootols
Function.implement ({
El debilidad: function (Wait, Inmediate) {
VAR TIMEOUT,
func = this;
Función de retorno () {
contexto var = this, args = argumentos;
var más tarde = function () {
tiempo de espera = nulo;
if (! inmediato) func.apply (contexto, args);
};
var callnow = inmediato &&! TimeOut;
ClearTimeOut (tiempo de espera);
tiempo de espera = setTimeOut (más tarde, espera);
if (callnow) func.apply (contexto, args);
};
}
});
// Úselo!
Window.addevent ("RESEZE", MYFN.DEBOUME (500));
Como se mencionó anteriormente, el evento de cambio de tamaño de la ventana es el lugar más común para usar la operación de frecuencia. Otro lugar común es que se proporciona un mensaje de finalización automático en función de la entrada clave del usuario. Realmente me gusta recopilar dichos fragmentos de código, lo que puede hacer que su sitio web sea más eficiente. Al mismo tiempo, también le recomiendo que estudie subscore.js, que proporciona una gran cantidad de funciones muy útiles.