JavaScript/JQuery: $(window).resize wie wird ausgelöst, NACHDEM die Größenänderung abgeschlossen ist?

Lesezeit: 2 Minuten

JavaScriptJQuery windowresize wie wird ausgelost NACHDEM die Grosenanderung abgeschlossen ist
Sarah

Ich verwende JQuery als solches:

$(window).resize(function() { ... });

Es scheint jedoch, dass, wenn die Person die Größe ihres Browserfensters manuell ändert, indem sie den Fensterrand zieht, um es größer/kleiner zu machen, die .resize obiges Ereignis wird mehrmals ausgelöst.

Frage: Wie rufe ich eine Funktion auf, NACHDEM die Größenänderung des Browserfensters abgeschlossen ist (so dass das Ereignis nur einmal ausgelöst wird)?

  • Siehe diese Antwort: stackoverflow.com/questions/667426/… Es beinhaltet die Verwendung von Timeouts, um die Ausführung Ihrer Funktion zu verzögern.

    – Alastair Pitts

    18. Mai 2010 um 3:42 Uhr

  • Ich weiß nicht, ob das möglich ist, aber Sie könnten dieses Plugin ausprobieren benalman.com/projects/jquery-resize-plugin

    – BrunoLM

    18. Mai 2010 um 3:47 Uhr

  • Übrigens habe ich festgestellt, dass dies in mobilen Browsern sehr nützlich ist, die dazu neigen, die Adressleiste allmählich auszublenden, wenn der Benutzer nach unten scrollt, wodurch die Größe des Bildschirms geändert wird. Ich habe auch erwartet, dass die Bildschirmgröße nur auf dem Desktop geändert wird …

    – MakisH

    21. September 2016 um 22:23 Uhr

Hier ist eine Modifikation der CMS-Lösung, die an mehreren Stellen in Ihrem Code aufgerufen werden kann:

var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

Verwendungszweck:

$(window).resize(function () {
    waitForFinalEvent(function(){
      alert('Resize...');
      //...
    }, 500, "some unique string");
});

Die CMS-Lösung ist in Ordnung, wenn Sie sie nur einmal aufrufen, aber wenn Sie sie mehrmals aufrufen, z. B. wenn verschiedene Teile Ihres Codes separate Rückrufe für die Größenänderung von Fenstern einrichten, schlägt dies fehl, da sie die teilen timer Variable.

Mit dieser Änderung geben Sie für jeden Rückruf eine eindeutige ID an, und diese eindeutigen IDs werden verwendet, um alle Timeout-Ereignisse getrennt zu halten.

  • Ich <3 u, ich habe dies kombiniert, während ich die Größe von Highcharts-Diagrammen im Vollbildmodus (nicht html5) geändert habe, und es funktioniert großartig.

    – Michael J. Calkins

    6. Mai 2013 um 6:51 Uhr

  • Absolut unglaublich!

    – Starker

    10. März 2014 um 10:26 Uhr

  • Da ich so sehr von Ihrer Antwort profitiert habe, dachte ich, ich hätte einen funktionierenden Prototyp Ihres bereitgestellten Codes für den Rest der Community freigegeben: jsfiddle.net/h6h2pzpu/3. Genießen Sie alle!

    – Jonas Stawski

    27. August 2015 um 19:55 Uhr


  • Das ist alles perfekt, ABER es verzögert die Ausführung der eigentlichen Funktion um Millisekunden (ms), was SEHR UNWÜNSCHT sein kann.

    – Thomas M

    2. September 2015 um 14:33 Uhr

  • Das macht es einfach perfekt. Gibt es eine Möglichkeit, die letzte Größenänderung zu erfassen und sich nicht auf diese Millisekunden verlassen zu müssen? Wie auch immer, das hat mir gerade den Tag gerettet :’) Danke.

    – Löwe

    5. August 2016 um 4:02 Uhr

JavaScriptJQuery windowresize wie wird ausgelost NACHDEM die Grosenanderung abgeschlossen ist
Carlos Martínez T

Ich ziehe es vor, ein Ereignis zu erstellen:

$(window).bind('resizeEnd', function() {
    //do something, window hasn't changed size in 500ms
});

So erstellen Sie es:

 $(window).resize(function() {
        if(this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function() {
            $(this).trigger('resizeEnd');
        }, 500);
    });

Sie könnten dies irgendwo in einer globalen Javascript-Datei haben.

  • Ich habe diese Lösung verwendet. Aber auf lange Sicht möchte ich dasselbe wie die Lösung von Brahn implementieren.

    – Bharat Patil

    11. Februar 2014 um 6:51 Uhr


  • Dies ermöglicht es Ihnen, sich überall an dieses Ereignis zu binden, nicht nur in einer Funktion, vorausgesetzt, Sie haben mehrere Seiten / .js-Dateien, die natürlich separate Reaktionen darauf erfordern

    – hanzolo

    8. April 2014 um 0:21 Uhr


  • Das hat bei mir nicht funktioniert, aber die DusanV-Antwort hat den Job gemacht

    – Lichtbyte

    19. Mai 2017 um 9:39 Uhr

Ich verwende die folgende Funktion, um wiederholte Aktionen zu verzögern, sie funktioniert in Ihrem Fall:

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

Verwendungszweck:

$(window).resize(function() {
    delay(function(){
      alert('Resize...');
      //...
    }, 500);
});

Die an sie übergebene Rückruffunktion wird nur ausgeführt, wenn der letzte Aufruf zur Verzögerung nach der angegebenen Zeit erfolgt ist. Andernfalls wird ein Timer zurückgesetzt. Ich finde dies für andere Zwecke nützlich, z. B. um zu erkennen, wann der Benutzer mit der Eingabe aufgehört hat usw. ..

  • Ich denke, dieser Ansatz kann fehlschlagen, wenn er mehrmals verwendet wird (z. B. wenn verschiedene Teile des Code-Setup-Callbacks zu $(window).resize), weil sie alle die teilen werden timer Variable. Siehe meine Antwort unten für vorgeschlagene Lösung.

    – brahn

    27. Dezember 2010 um 21:21 Uhr


  • Sehr schön! Klappt wunderbar! Wie Ihre Antworten … einfach und elegant!

    – Herr Kürbis

    13. August 2014 um 20:51 Uhr

Wenn Sie Underscore.js installiert haben, könnten Sie:

$(window).resize(_.debounce(function(){
    alert("Resized");
},500));

Einige der zuvor genannten Lösungen haben bei mir nicht funktioniert, obwohl sie allgemeiner verwendet werden. Alternativ habe ich habe diesen gefunden das hat bei der Größenänderung des Fensters funktioniert:

$(window).bind('resize', function(e){
    window.resizeEvt;
    $(window).resize(function(){
        clearTimeout(window.resizeEvt);
        window.resizeEvt = setTimeout(function(){
        //code to do after window is resized
        }, 250);
    });
});

  • Nur Ihr Beispiel hat bei mir funktioniert … die anderen oben nicht! Ich bin mir nicht sicher, warum Ihre Antwort nicht ausgewählt wurde.

    – Hokuspokus

    9. Juni 2015 um 21:03 Uhr

  • Ich verstehe nicht, warum ich das Größenänderungsereignis innerhalb des Größenänderungsereignisses abfangen soll, aber es funktioniert auch für mich …

    – Lichtbyte

    19. Mai 2017 um 9:37 Uhr

  • Mumbo Jumbo, denke ich, weil andere sich auf die Verallgemeinerung konzentrieren und nach einer Lösung für ein solches Problem suchen (mehrere Aufrufe einer Funktion).

    – DusanV

    20. Mai 2017 um 10:05 Uhr

  • lightbyte, weil Sie bei jedem Aufruf der Funktion vorherige Ereignisse stoppen müssen.

    – DusanV

    20. Mai 2017 um 10:06 Uhr

JavaScriptJQuery windowresize wie wird ausgelost NACHDEM die Grosenanderung abgeschlossen ist
Irvin Dominik

Vielen Dank an David Walsh, hier ist eine Vanilla-Version von Underscore Debounce.

Code:

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Einfache Verwendung:

var myEfficientFn = debounce(function() {
    // All the taxing stuff you do
}, 250);

$(window).on('resize', myEfficientFn);

Ref: http://davidwalsh.name/javascript-debounce-function

  • Nur Ihr Beispiel hat bei mir funktioniert … die anderen oben nicht! Ich bin mir nicht sicher, warum Ihre Antwort nicht ausgewählt wurde.

    – Hokuspokus

    9. Juni 2015 um 21:03 Uhr

  • Ich verstehe nicht, warum ich das Größenänderungsereignis innerhalb des Größenänderungsereignisses abfangen soll, aber es funktioniert auch für mich …

    – Lichtbyte

    19. Mai 2017 um 9:37 Uhr

  • Mumbo Jumbo, denke ich, weil andere sich auf die Verallgemeinerung konzentrieren und nach einer Lösung für ein solches Problem suchen (mehrere Aufrufe einer Funktion).

    – DusanV

    20. Mai 2017 um 10:05 Uhr

  • lightbyte, weil Sie bei jedem Aufruf der Funktion vorherige Ereignisse stoppen müssen.

    – DusanV

    20. Mai 2017 um 10:06 Uhr

1645909868 627 JavaScriptJQuery windowresize wie wird ausgelost NACHDEM die Grosenanderung abgeschlossen ist
Volker E.

Tatsächlich können Sie, wie ich weiß, einige Aktionen nicht genau ausführen, wenn die Größenänderung deaktiviert ist, einfach weil Sie die Aktionen zukünftiger Benutzer nicht kennen. Aber Sie können davon ausgehen, dass die Zeit zwischen zwei Größenänderungsereignissen verstrichen ist. Wenn Sie also etwas länger als diese Zeit warten und keine Größenänderung vorgenommen wird, können Sie Ihre Funktion aufrufen.
Idee ist, dass wir verwenden setTimeout und seine ID, um es zu speichern oder zu löschen. Wir wissen zum Beispiel, dass die Zeit zwischen zwei Größenänderungsereignissen 500 ms beträgt, daher warten wir 750 ms.

var a;
$(window).resize(function(){
  clearTimeout(a);
  a = setTimeout(function(){
    // call your function
  },750);
});

868240cookie-checkJavaScript/JQuery: $(window).resize wie wird ausgelöst, NACHDEM die Größenänderung abgeschlossen ist?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy