💡 Qué es el debounce en JavaScript (con ejemplos y explicación clara)

Tiempo de lectura estimado: 2 minutos

Cuando trabajamos con JavaScript en el navegador, especialmente en interfaces dinámicas, es común encontrarse con un problema: las funciones se ejecutan demasiadas veces seguidas. Esto ocurre, por ejemplo, al escribir en un buscador, mover el ratón o redimensionar la ventana.

La solución a este problema es utilizar una técnica llamada debounce.

En este artículo aprenderás qué es debounce, cómo funciona y cómo aplicarlo con ejemplos prácticos y fáciles de entender.

🔍 ¿Qué es «debounce»?

Debounce es una técnica de programación que retrasa la ejecución de una función hasta que ha pasado un tiempo determinado desde la última vez que se llamó.

Es muy útil para evitar ejecuciones innecesarias de funciones que responden a eventos que se disparan constantemente.

🧠 Ejemplo real

Imagina que tienes un campo de búsqueda que hace peticiones a una API cada vez que el usuario escribe. Si no controlas eso, podrías estar enviando 10 o más peticiones por segundo mientras escribe. Con debounce, solo se realiza una petición cuando el usuario ha terminado de escribir y deja de teclear durante un momento.

function debounce(func, delay) {
  let timeout;

  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

✍️ Explicación paso a paso

func: es la función que queremos ejecutar (por ejemplo, una búsqueda).
delay: es el tiempo de espera en milisegundos.
timeout: almacena el temporizador que controla cuándo se ejecuta func.
Cuando se llama la función devuelta:
- Se cancela cualquier ejecución anterior.
- Se reinicia un temporizador para ejecutar func después del tiempo indicado.
- Si se vuelve a llamar antes de que pase el tiempo, se vuelve a cancelar y a reiniciar.

🔧 Ejemplo completo: buscador con debounce

Aquí tienes un ejemplo real de cómo aplicar debounce a un buscador que simula una API con datos de usuarios.

📄 Código (HTML + JavaScript)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Buscador con Debounce</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    input { padding: 10px; width: 300px; }
    ul { margin-top: 20px; }
  </style>
</head>
<body>

  <h2>Buscar usuario:</h2>
  <input type="text" id="search" placeholder="Escribe un nombre...">
  <ul id="results"></ul>

  <script>
    // Función debounce
    function debounce(func, delay) {
      let timeout;
      return function (...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), delay);
      };
    }

    // Simulación de búsqueda a una "API"
    async function buscarUsuarios(query) {
      if (!query.trim()) {
        document.getElementById('results').innerHTML = '';
        return;
      }

      const res = await fetch('https://jsonplaceholder.typicode.com/users');
      const users = await res.json();

      const filtrados = users.filter(user =>
        user.name.toLowerCase().includes(query.toLowerCase())
      );

      const lista = filtrados.map(user => `<li>${user.name}</li>`).join('');
      document.getElementById('results').innerHTML = lista || '<li>No se encontraron resultados</li>';
    }

    // Asignar el evento con debounce
    const input = document.getElementById('search');
    input.addEventListener('input', debounce(function (e) {
      buscarUsuarios(e.target.value);
    }, 500));
  </script>

</body>
</html>

🧪 ¿Cómo funciona este ejemplo?

El usuario escribe en el campo de texto.
Cada vez que escribe, se cancela cualquier búsqueda anterior.
Solo si deja de escribir durante 500ms, se lanza la función de búsqueda.
Se filtran los resultados que contienen el texto introducido.

🆚 Debounce vs Throttle (extra)

Técnica	¿Qué hace?
Debounce	Ejecuta la función después de un periodo sin llamadas
Throttle	Ejecuta la función como máximo una vez cada X milisegundos

✅ Conclusión

La técnica debounce es esencial para mejorar el rendimiento y la experiencia de usuario en aplicaciones web modernas. Con ella, evitas llamadas innecesarias a funciones y mantienes tu aplicación ligera y eficiente.

Ahora que ya sabes qué es debounce y cómo aplicarlo, puedes implementarlo en tus propios proyectos para controlar eventos como escritura, scroll, resize o cualquier otro que se dispare con frecuencia.

Saludos!