jQuery / Methode / .resize() - Auf Fenstergrößen reagieren

Verwenden Sie $(window).on("resize", handler), wenn sich die Browserfenstergröße ändert. Die Kurzform .resize(handler) ist seit jQuery 3.3 veraltet; neuer Code sollte .on() verwenden. Wird dieselbe Arbeit anfangs benötigt, rufen Sie die Aktualisierungsfunktion einmal direkt auf.

resize-Ereignis und Kurzform unterscheiden

Das jQuery-resize-Ereignis registriert einen Handler auf window. Die veraltete .resize()-Kurzform bedeutet nicht, dass das Ereignis selbst veraltet ist. Die geprüften Vollversionen 3.7.1 und 4.0.0 enthalten die Kurzform weiterhin; .on("resize", …) macht Registrierung und Bereinigung deutlich.

Das native window-resize-Ereignis steigt nicht zu Vorfahren auf. Eine geänderte div-Breite löst nicht automatisch resize auf diesem div aus. Für Elementabmessungen betrachten Sie ResizeObserver. Eine Fensteränderung kann mehrere Ereignisse senden; verlassen Sie sich nicht auf eine feste Anzahl.

Vollständiges Beispiel mit Initialisierung und Debounce

Speichern Sie alles in UTF-8 als resize-demo.html und öffnen Sie die Datei im Browser. Die offizielle jQuery-Datei 4.0.0 vom Content Delivery Network (CDN) benötigt Internet, keine Installation. Die Bedienung wurde mit 3.7.1 und 4.0.0 in Edge unter Windows durch geänderte Viewport-Abmessungen geprüft.

Debounce verwirft bei neuen Meldungen den vorherigen Timer und aktualisiert 150ms nach der letzten Meldung. Die Browserplanung kann die Ausführung weiter verzögern. Unter 600 CSS-Pixeln erscheint narrow, darüber beziehungsweise bei 600 wide; eine CSS-Media-Query steuert den Beispielrahmen.

<!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>

Diese Anfangsausgabe gilt für einen Viewport mit 390×844 CSS-Pixeln. Ihre Maße weichen ab; ab Breite 600 ist mode wide. resize events=0 bei renders=1 zeigt die direkt aufgerufene Initialisierung.

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

1. Ändern Sie Fenster oder responsiven Entwicklervorschaubereich. Nach Ende der Änderung sollte viewport die endgültigen Maße zeigen. resize events zählt Meldungen, renders tatsächliche Aktualisierungen.
2. Trigger resize notification sendet nur eine Meldung. Ereignis- und verzögerter Renderzähler steigen ohne neue Fenstermaße.
3. Stop listener setzt listener=off. Spätere Größenänderungen verändern die Ausgabe nicht. Ein ausstehender Timer wird ebenfalls abgebrochen.
4. Start listener misst die aktuelle Größe neu. Vorheriges Entfernen verhindert doppelte eigene Handler bei wiederholtem Start.
5. Reset counters stellt bei aktuellen Maßen null Ereignisse und eine Aktualisierung her und hört wieder zu. Es setzt das Fenster nicht auf 390×844 zurück.

Arbeitsstopp und Wiederherstellen tatsächlicher Maße sind verschieden. Betätigen Sie bei gleichen Maßen nur den Meldungsbutton, um Ereignis und Größenänderung zu vergleichen. Drei synchrone Testmeldungen ergaben drei Ereignisse und eine verzögerte Aktualisierung, aber keine feste Anzahl für reale Mausbewegungen.

Registrierung und ausstehende Arbeit bereinigen

Der Namensraum resize.windowLesson kennzeichnet den eigenen Handler. .off("resize.windowLesson") entfernt ihn gezielt, während .off("resize") auch fremde Handler entfernen würde. Mehrere Komponenten benötigen unterschiedliche Namen und passende Lebenszyklen.

Ein entfernter Handler hebt ein bereits geplantes setTimeout nicht auf. detach() führt zusätzlich clearTimeout(timer) aus. attach() entfernt alte Registrierung und Arbeit zuerst, und Reset verwendet denselben Weg. Bereinigen Sie Handler und Timer beim Entfernen einer Komponente oder Seitenwechsel gemeinsam.

In altem Code registriert .resize(handler), während .resize() ohne Argument benachrichtigt. Dieser Konsolencode prüft die Kurzform auf einem unabhängigen Objekt, ohne Fenster oder Hauptzähler zu ändern. Für neuen Code gelten die oben gezeigten .on()- und .trigger()-Formen.

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

legacy shorthand calls=1

Entscheiden, ob resize passt

Einfache Spalten, Farben und Rahmen kann CSS mit Media-Queries umsetzen. Prüfen Sie das vor wiederholtem Messen und Schreiben in JavaScript. Hier gestaltet CSS den Rahmen und JavaScript meldet Zähler und Zustand.

Debounce bearbeitet die Endgröße statt jedes Zwischenschritts. Benötigen Sie während der Änderung laufende Rückmeldung, kann die absichtliche Verzögerung stören; legen Sie das Timing zuerst fest. Vermeiden Sie schwere Serveranfragen bei jedem Ereignis und immer neue identische Ausgaben im Document Object Model (DOM).

Seitenleiste, Schrift oder Inhalt können Elemente ohne neue Fenstergröße ändern. window resize erfasst das nicht vollständig. Unterscheiden Sie bei ResizeObserver gemessene Box und geändertes Element; verändern Sie die beobachtete Größe nicht endlos im Callback. CSS-Pixel des Fensters sind außerdem nicht die physische Bildschirmauflösung.