.resize() - Responder a cambios de tamaño de la ventana

jQuery

Creado 2026-10-26 Última modificación 2026-10-26

Use $(window).on("resize", controlador) para responder al tamaño de la ventana. La forma abreviada .resize(controlador) está obsoleta desde jQuery 3.3; use .on() en código nuevo. Si el trabajo también hace falta inicialmente, llame directamente una vez a la función de actualización.

Evento resize y forma abreviada

El evento resize de jQuery registra un controlador en window. La obsolescencia de .resize() abreviado no afecta al propio evento. Las versiones completas comprobadas 3.7.1 y 4.0.0 conservan el método; .on("resize", …) hace explícitos registro y limpieza.

El evento nativo window resize no burbujea. Cambiar el ancho de un div no dispara automáticamente resize en ese div. Para dimensiones del propio elemento, considere ResizeObserver. El cambio de ventana puede generar varios eventos: no dependa de una cantidad exacta.

Ejemplo completo con inicio, debounce y limpieza

Guarde todo el código en UTF-8 como resize-demo.html y ábralo en el navegador. Se necesita Internet para el archivo oficial de jQuery 4.0.0 de la red de distribución de contenido (CDN), sin instalación. Las interacciones se ejecutaron con 3.7.1 y 4.0.0 en Edge para Windows, modificando el área visible.

Debounce cancela el temporizador anterior con cada aviso y actualiza 150ms después del último. La planificación del navegador puede retrasar más la ejecución. El umbral narrow/wide es de 600 píxeles CSS; una consulta de medios CSS controla el borde.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Window resize with debounce and cleanup</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button { font: inherit; margin: 4px; max-width: 100%; }
    #sample { padding: 16px; background: #edf9f6; border: 1px solid teal; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
    @media (min-width: 600px) { #sample { border-width: 3px; } }
  </style>
</head>
<body>
  <h1>Observe window resize</h1>
  <button type="button" id="trigger">Trigger resize notification</button>
  <button type="button" id="stop">Stop listener</button>
  <button type="button" id="start">Start listener</button>
  <button type="button" id="reset">Reset counters</button>
  <div id="sample">Resize the browser or responsive preview.</div>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      let timer = null, active = false, events = 0, renders = 0;
      function render() {
        renders++;
        const width = window.innerWidth;
        const height = window.innerHeight;
        $("#result").text(`viewport=${width} x ${height}\nmode=${width < 600 ? "narrow" : "wide"}\nlistener=${active ? "on" : "off"}\nresize events=${events}\nrenders=${renders}`);
      }
      function changed() {
        events++;
        clearTimeout(timer);
        timer = setTimeout(function () { timer = null; render(); }, 150);
      }
      function detach() {
        $(window).off("resize.windowLesson");
        clearTimeout(timer); timer = null; active = false;
      }
      function attach() {
        detach();
        $(window).on("resize.windowLesson", changed);
        active = true;
        render();
      }
      $("#trigger").on("click", function () { $(window).trigger("resize"); });
      $("#stop").on("click", function () { detach(); render(); });
      $("#start").on("click", attach);
      $("#reset").on("click", function () { detach(); events = 0; renders = 0; attach(); });
      attach();
    });
  </script>
</body>
</html>

Esta salida inicial supone 390×844 píxeles CSS de área visible. Sus dimensiones pueden ser distintas; con ancho de 600 o más, mode es wide. resize events=0 y renders=1 muestran el inicio por llamada directa.

viewport=390 x 844
mode=narrow
listener=on
resize events=0
renders=1

Cambie la ventana o la vista adaptable de desarrollo. Al parar, viewport debe mostrar las dimensiones finales. resize events cuenta avisos y renders actualizaciones.
Trigger resize notification solo envía una notificación. Los contadores aumentan tras el retraso sin cambiar dimensiones.
Stop listener pone listener=off. Los cambios posteriores no alteran la salida y se cancela el temporizador pendiente.
Start listener vuelve a medir el tamaño actual. Elimina el controlador anterior antes de registrar, evitando duplicados al pulsar varias veces.
Reset counters restaura cero eventos y una actualización en el tamaño actual y vuelve a escuchar. No devuelve la ventana a 390×844.

Parar el trabajo no equivale a restaurar dimensiones reales. Mantenga el tamaño y use solo el botón de aviso para comparar. Tres notificaciones síncronas produjeron tres eventos y una actualización diferida en la verificación; eso no fija el número de eventos al arrastrar con el ratón.

Evitar registros duplicados y trabajo pendiente

El espacio de nombres resize.windowLesson identifica el controlador del ejemplo. .off("resize.windowLesson") lo elimina de forma específica, mientras .off("resize") quitaría también otros. Varios componentes necesitan nombres distintos y gestión de su duración.

Eliminar un controlador no cancela setTimeout ya programado. detach() también llama a clearTimeout(timer). attach() retira registro y trabajo anteriores antes de empezar; Reset reutiliza esa ruta. Limpie eventos y temporizadores al quitar componentes o cambiar páginas.

En código antiguo, .resize(handler) registra y .resize() sin argumentos notifica. Este fragmento de consola comprueba la forma abreviada en un objeto independiente, sin cambiar ventana ni contadores principales. Para código nuevo, use .on() y .trigger() como arriba.

const $target = $({});
let calls = 0;
$target.resize(function () { calls++; });
$target.resize();
console.log(`legacy shorthand calls=${calls}`);
$target.off("resize");

legacy shorthand calls=1

Decidir si resize es adecuado

Las consultas de medios CSS pueden resolver columnas, colores y bordes sencillos. Revíselo antes de leer anchos y escribir estilos repetidamente con JavaScript. Aquí CSS controla el borde y JavaScript muestra contadores y estado.

Debounce procesa el tamaño final en vez de cada paso intermedio. Si necesita respuesta continua, su retraso deliberado puede resultar incómodo; defina primero el momento necesario. Evite peticiones pesadas al servidor por cada evento o añadir constantemente salidas idénticas al modelo de objetos del documento (DOM).

Una barra lateral, una fuente o el contenido pueden cambiar un elemento sin alterar la ventana. window resize no detecta todo. Con ResizeObserver, distinga la caja medida del elemento modificado y evite cambiar repetidamente el tamaño observado desde su callback. Los píxeles CSS de la ventana tampoco equivalen a la resolución física de pantalla.

jQuery