jQuery / Método / .resize() - Reagir a mudanças no tamanho da janela

Use $(window).on("resize", manipulador) para reagir ao tamanho da janela. O atalho .resize(manipulador) está obsoleto desde o jQuery 3.3; prefira .on() em código novo. Se o trabalho também for necessário inicialmente, chame a função de atualização uma vez diretamente.

Evento resize e atalho

O evento resize do jQuery registra um manipulador em window. O atalho .resize() obsoleto não torna o evento obsoleto. As versões completas verificadas 3.7.1 e 4.0.0 ainda contêm o método; .on("resize", …) torna registro e limpeza explícitos.

O evento nativo window resize não se propaga para ancestrais. Mudar a largura de um div não dispara automaticamente resize nesse div. Para dimensões do próprio elemento, considere ResizeObserver. Uma mudança de janela pode gerar vários eventos; não dependa de um número exato.

Exemplo completo com início, debounce e limpeza

Salve todo o código em UTF-8 como resize-demo.html e abra no navegador. É preciso Internet para o arquivo oficial do jQuery 4.0.0 da rede de distribuição de conteúdo (CDN), sem instalação. As interações foram executadas com 3.7.1 e 4.0.0 no Edge para Windows, alterando a área visível.

Debounce cancela o temporizador anterior a cada aviso e atualiza 150ms após o último. O agendamento do navegador pode atrasar mais a execução. O limite narrow/wide é de 600 pixels CSS; uma consulta de mídia CSS controla a borda.

<!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 saída inicial pressupõe uma área visível de 390×844 pixels CSS. Suas dimensões podem ser diferentes; com largura de 600 ou mais, mode é wide. resize events=0 e renders=1 mostram a inicialização por chamada direta.

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

1. Altere a janela ou a visualização responsiva de desenvolvimento. Ao parar, viewport deve mostrar as dimensões finais. resize events conta avisos e renders atualizações.
2. Trigger resize notification envia só uma notificação. Os contadores aumentam após o atraso, sem novas dimensões.
3. Stop listener define listener=off. Mudanças posteriores não alteram a saída e o temporizador pendente é cancelado.
4. Start listener mede o tamanho atual. Remove o manipulador anterior antes de registrar, evitando duplicatas após vários cliques.
5. Reset counters restaura zero eventos e uma atualização nas dimensões atuais e volta a ouvir. Não devolve a janela a 390×844.

Parar o trabalho não é restaurar dimensões reais. Mantenha o tamanho e use apenas o botão de aviso para comparar. Três notificações síncronas produziram três eventos e uma atualização adiada na verificação; isso não fixa a quantidade de eventos em uma operação real do mouse.

Evitar duplicatas e trabalho pendente

O namespace resize.windowLesson identifica o manipulador do exemplo. .off("resize.windowLesson") o remove especificamente, enquanto .off("resize") também removeria outros. Vários componentes precisam de nomes distintos e gerenciamento de duração.

Remover um manipulador não cancela setTimeout já agendado. detach() também chama clearTimeout(timer). attach() remove o registro e o trabalho anteriores antes de iniciar; Reset reutiliza o caminho. Limpe eventos e temporizadores ao remover componentes ou trocar de página.

Em código antigo, .resize(handler) registra e .resize() sem argumentos notifica. Este trecho do Console verifica o atalho em um objeto independente, sem alterar janela nem contadores principais. Para código novo, use .on() e .trigger() como acima.

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 se resize é a ferramenta adequada

Consultas de mídia CSS podem resolver colunas, cores e bordas simples. Confira antes de ler larguras e escrever estilos repetidamente em JavaScript. Aqui CSS controla a borda e JavaScript mostra contadores e estado.

Debounce processa o tamanho final em vez de cada etapa intermediária. Se for necessária resposta contínua, o atraso proposital pode incomodar; defina primeiro o momento desejado. Evite solicitações pesadas ao servidor por evento ou acrescentar constantemente saídas idênticas ao modelo de objetos do documento (DOM).

Barra lateral, fonte ou conteúdo podem mudar um elemento sem alterar a janela. window resize não detecta tudo. Com ResizeObserver, diferencie a caixa medida do alvo alterado e evite mudar repetidamente a dimensão observada no callback. Pixels CSS da janela também não são a resolução física da tela.