Gestión y limitación eficiente de eventos
Implemente throttling y debouncing de eventos que se desencadenan con frecuencia, como el redimensionamiento o el desplazamiento, para evitar llamadas excesivas a funciones y mejorar la capacidad de respuesta.
Gestión y limitación eficiente de eventos es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 3 lecciones en total.
Sobrecarga de eventos: un problema de rendimiento
Al crear aplicaciones web interactivas, suele recurrirse a eventos como el desplazamiento, el cambio de tamaño o la escritura. Estos eventos activan funciones que actualizan la interfaz de usuario o realizan cálculos.
Sin embargo, si estos eventos se activan con demasiada frecuencia, pueden provocar cuellos de botella de rendimiento, una experiencia de usuario lenta e incluso bloqueos del navegador. Por eso, las técnicas de optimización resultan fundamentales.
El problema: activación rápida de eventos
Veamos con qué frecuencia puede activarse un evento típico, como scroll, sin ningún tipo de optimización. Abra la consola u observe el contador mientras se desplaza.
Observe lo rápido que aumenta el contador: esto indica que se realizan muchas llamadas a funciones en poco tiempo. Puede resultar muy ineficiente.
<!DOCTYPE html>
<html>
<head>
<title>Rapid Event Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
body { height: 200vh; font-family: sans-serif; margin: 0; }
#status { position: fixed; top: 10px; left: 10px; background: #ffe0b2; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
<div id="status">Scroll Count: 0</div>
<p>Scroll down to see the event fire rapidly.</p>
<script>
$(document).ready(function() {
let count = 0;
$(window).on('scroll', function() {
count++;
$('#status').text('Scroll Count: ' + count);
});
});
</script>
</body>
</html>Introducción al throttling
El throttling es una técnica que limita la frecuencia con la que se puede llamar a una función durante un periodo de tiempo. Garantiza que una función se ejecute como máximo una vez en un intervalo determinado.
Imagínelo como una puerta que solo se abre cada 200 milisegundos. Por muchas veces que intente pasar, solo podrá hacerlo cuando la puerta esté abierta.
Throttling en acción
Aquí tiene una utilidad sencilla de throttling. Garantiza que nuestro controlador de desplazamiento se ejecute como máximo una vez cada 200 milisegundos. Esto reduce considerablemente el número de llamadas durante un desplazamiento continuo.
Compárelo con el ejemplo anterior. El contador se actualiza de forma fluida, aunque con menos frecuencia, lo que ahorra recursos.
<!DOCTYPE html>
<html>
<head>
<title>Throttling Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
body { height: 200vh; font-family: sans-serif; margin: 0; }
#status { position: fixed; top: 10px; left: 10px; background: #c8e6c9; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
<div id="status">Throttled Scroll Count: 0</div>
<p>Scroll down. The count updates less frequently.</p>
<script>
// A simple throttling utility function
function throttle(func, delay) {
let canRun = true;
return function(...args) {
if (canRun) {
func.apply(this, args);
canRun = false;
setTimeout(() => canRun = true, delay);
}
};
}
$(document).ready(function() {
let count = 0;
const throttledScroll = throttle(function() {
count++;
$('#status').text('Throttled Scroll Count: ' + count);
}, 200); // Update at most every 200ms
$(window).on('scroll', throttledScroll);
});
</script>
</body>
</html>Introducción al debouncing
El debouncing es otra técnica que retrasa la ejecución de una función hasta que ha transcurrido cierto tiempo desde la última vez que se activó el evento.
Imagine una luz que solo se apaga después de que haya dejado de moverse durante 1 segundo. Si continúa moviéndose, el temporizador se reinicia. La función solo se ejecuta cuando el usuario ha terminado su acción durante el retraso especificado.
Debouncing en acción
Aquí aplicamos debouncing al evento keyup de un campo de texto. El estado solo se actualiza después de que deje de escribir durante 500 milisegundos.
Es perfecto para los cuadros de búsqueda, en los que solo se desea realizar una consulta cuando el usuario ha terminado de escribir el término.
<!DOCTYPE html>
<html>
<head>
<title>Debouncing Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
body { font-family: sans-serif; margin: 0; padding: 20px; }
input { padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; width: 100%; max-width: 300px; }
#status { background: #bbdefb; padding: 8px; margin-top: 15px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
</style>
</head>
<body>
<p>Type into the box. The status updates only after you pause.</p>
<input type="text" id="myInput" placeholder="Start typing...">
<div id="status">Last typed: (none)</div>
<script>
// A simple debouncing utility function
function debounce(func, delay) {
let timeoutId;
return function(...args) {
const context = this;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
$(document).ready(function() {
const debouncedLog = debounce(function(event) {
$('#status').text('Last typed: ' + $(event.target).val());
}, 500); // Wait 500ms after typing stops
$('#myInput').on('keyup', debouncedLog);
});
</script>
</body>
</html>Throttling frente a debouncing: diferencias clave
Aunque ambas técnicas optimizan la gestión de eventos, tienen objetivos distintos:
- Throttling: garantiza la ejecución periódica de una función a lo largo del tiempo, aunque el evento se active rápidamente. Se centra en controlar la frecuencia.
- Debouncing: garantiza que una función solo se ejecute después de un periodo de inactividad. Se centra en esperar a que el usuario termine una acción.
La elección de la técnica adecuada depende del caso de uso específico.
Casos de uso prácticos
Estos son algunos casos habituales para cada técnica:
- Throttling:
- Cambio de tamaño de la ventana
- Desplazamiento por la página
- Movimientos de arrastrar y soltar
- Actualizaciones de juegos (por ejemplo, disparar un arma) - Debouncing:
- Entrada en la barra de búsqueda (autocompletado)
- Validación de formularios después de la entrada del usuario
- Guardado de contenido en un editor de texto
- Activación de una llamada a una API después de que el usuario deje de escribir
Integración con eventos de jQuery
Puede integrar fácilmente estas funciones de utilidad con métodos de eventos de jQuery como .on() o .bind(). Solo tiene que pasar su función con throttling o debouncing como controlador del evento.
$(window).on('resize', throttle(myResizeHandler, 250));
$('#search-input').on('keyup', debounce(searchFunction, 300));Así, los detectores de eventos serán eficientes y la aplicación seguirá respondiendo correctamente.
Ventajas de rendimiento
Al implementar throttling y debouncing, obtiene varias ventajas de rendimiento:
- Menor uso de la CPU: Menos llamadas a funciones implican menos trabajo para el navegador.
- Interfaz más fluida: Evita animaciones entrecortadas o interfaces que no responden.
- Mejor experiencia de usuario: Los usuarios perciben la aplicación como más rápida y fluida.
- Llamadas a la API optimizadas: Evita saturar el backend con solicitudes innecesarias.
Comprobación rápida sobre la optimización de eventos
¿Cuál de los siguientes casos se gestionaría mejor mediante debouncing?
Repaso y próximos pasos
¡Buen trabajo! Ha aprendido dos técnicas potentes para optimizar la gestión de eventos:
- Throttling: limita la frecuencia con la que se puede llamar a una función.
- Debouncing: retrasa la ejecución de una función hasta que transcurre un periodo de inactividad.
Dominar estas técnicas mejorará considerablemente el rendimiento y la capacidad de respuesta de sus aplicaciones jQuery. Experimente con distintos retrasos para encontrar el punto óptimo según sus necesidades.
Aprende JavaScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 22
- Lecciones
- 48
Preguntas frecuentes
¿La lección «Gestión y limitación eficiente de eventos» es gratis?
Sí — el texto completo de «Gestión y limitación eficiente de eventos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Gestión y limitación eficiente de eventos»?
Implemente throttling y debouncing de eventos que se desencadenan con frecuencia, como el redimensionamiento o el desplazamiento, para evitar llamadas excesivas a funciones y mejorar la capacidad de… Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar jQuery Academy?
No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.
¿Cuánto tiempo toma la lección «Gestión y limitación eficiente de eventos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?
Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Optimización de operaciones de manipulación del DOM
- Gestión y limitación eficiente de eventos
- Uso de la caché y los objetos Deferred