Wenn Sie etwas wie jQuery UI Resizable gewohnt sind, erhalten Sie Ereignisse, an die Sie während der Größenänderung, aber auch am *Ende* der Größenänderung binden können.
Ein solches Ereignis gibt es in nativem JavaScript nicht.
Sie können es simulieren, indem Sie einen Timeout einstellen, um den Code auszuführen, den Sie ausführen möchten, wenn die Größenänderung stoppt. Löschen Sie dann diesen Timeout jedes Mal, wenn ein Größenänderungsereignis ausgelöst wird. Auf diese Weise wird der Timeout nur abgeschlossen, wenn dieser Timeout tatsächlich abgeschlossen wird.
var resizeTimer;
$(window).on('resize', function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
// Run code here, resizing has "stopped"
}, 250);
});Ähnlich wie bei Debouncing.
Ja!
Ich kenne diesen Fallback im Resize-Fenster.
Sehr geschätzt Ihr Trick!
Diese Technik wird als „Debouncing“ bezeichnet. Wenn Sie zufällig underscore verwenden, ist der Code recht einfach
David Walsh schrieb eine vernünftige Übersicht darüber, wie das funktioniert.
Ich habe am Ende des Artikels erwähnt, dass es dem Debouncing ähnelt. Aber es ist nicht ganz dasselbe. Debouncing wird es alle (was auch immer) Sekunden ausführen, egal was passiert, etwas anders als „warten Sie, bis Sie fertig sind“.
Sie denken an Throttling, das die Funktion einmal alle (was auch immer) Sekunden aufruft. Debouncing wird entweder einmal am Anfang oder am Ende der Aufrufserie ausgeführt, solange diese innerhalb von (was auch immer) Sekunden stattfinden, aber das wussten Sie ja bereits.
Hallo Chris
Ich verwende einen ähnlichen Trick bei der Arbeit mit einem kleinen Unterschied: Anstatt Code inline auszuführen, lösen wir ein zweites Ereignis aus (ich nenne es 'calmresize'). Auf diese Weise binden wir nur einen Resize-Handler für die gesamte Website und Module können stattdessen auf das calmresize-Ereignis hören.
Der Code
Ich hoffe, das hilft jemandem. Danke für all die Code-Schnipsel, Chris – du hast mich schon oft aus der Patsche geholfen!
Entschuldigung, es sollte $(window) sein
Hey Matt,
Mir gefällt Ihr Schnipsel und ich möchte ihn in ein jQuery-Plugin integrieren. Ist das für Sie in Ordnung und wie soll ich ihn zitieren?
Mit freundlichen Grüßen,
Sebastian
Was ist der Zweck der Verwendung von Prototype hier?
Hallo Sebastian, ich freue mich, dass Sie es nützlich fanden. Wenn Sie Matt Perry und PaperShaker uk.paper-shaker.com zitieren könnten, wäre das ausgezeichnet.
Danke
Matt
Ich glaube, ich habe eine ziemlich einfache Lösung gefunden. Sie funktioniert auch für Scroll-Events,...
Das ist nützlich, wenn Sie nach dem Ändern der Größe dieselbe Resize-Funktion auslösen möchten (wenn Sie sehr schnell die Größe ändern, werden manchmal Werte nicht aktualisiert)
Ich habe einen Resizeend-Event-Emitter auf NPM veröffentlicht
https://www.npmjs.com/package/resize-end
Ich bin neu in der Webseitenentwicklung und habe einige Schwierigkeiten mit einem Code, an dem ich arbeite. Ich muss eine CSS-Eigenschaft (ich glaube, das nennt man so) am Ende einer Fenstergrößenänderung ändern (oder ich könnte es auch am Anfang tun). Es ist die linke Eigenschaft. Ich habe eine Klasse namens 'sections' und muss left: auf 0 setzen. Ich habe versucht, Code wie diesen zu schreiben, aber es hat nicht viel Erfolg gebracht. Ich werde das morgen versuchen, aber ich habe eine schnelle Frage. Brauche ich etwas, damit dieser Code funktioniert? Oder muss ich nur jQuery einbinden? Die anderen Beispiele, die ich gesehen habe, scheinen überhaupt nicht zu funktionieren. Und ich weiß, dass Sie sagten, dass diese Funktionen in nativem Javascript nicht existieren, aber Sie können sie mit Ihrem Code simulieren ... ist Ihr Code jQuery oder ist es Javascript? Ich war der Meinung, dass beides unterschiedlich ist. Ich dachte, jQuery wäre in Javascript geschrieben, aber nicht in der Tat Javascript. Es war etwas anderes. Ich bin nur etwas verwirrt.
Ich wollte Ihnen nur für den tollen Artikel danken. Ich habe ihn erfolgreich in meine Website integriert und er funktioniert jetzt. Vielen Dank.
Gut gemacht, es hat mir produktive Stunden gespart...
Für CSS3-Übergänge
$(‘.target’).on(‘webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend’, _.debounce(function () {
console.log(‘Ihr Code hier’)
}, 250));
Die beste Lösung ist hier
http://stackoverflow.com/questions/5489946/jquery-how-to-wait-for-the-end-of-resize-event-and-only-then-perform-an-ac/27923937#27923937
Es ist sehr elegant und effektiv. Einfach wunderbar
Danke dafür!
Funktioniert sehr gut! Danke!
Ich habe festgestellt, dass diese Methode nicht immer zuverlässig ist, wenn es darum geht, das Ende der Größenänderung durch den Benutzer zu „erfassen“. Ich habe eine Methode, die die Viewport-Breite verwendet, um Spalten aus einem Feed von Elementen hinzuzufügen oder zu entfernen, und ich stelle fest, dass bei der Verwendung dieser Methode, um sie zu verzögern, manchmal nicht die endgültige Viewport-Breite „erfasst“ wird, wenn der Benutzer die Bildschirmgröße ändert. Ich bin mir nicht sicher, ob dies mit dem Timeout zusammenhängt, der den endgültigen Fensterzustand negiert, aber es scheint nicht technisch zuverlässig zu sein.
Chris, ich habe gerade an einer Website gearbeitet, auf der ich lodash nicht verwenden konnte, nur jQuery, und das hier ist perfekt und einfach. Sie haben sich viele großartige und nützliche Dinge auf den guten alten CSS-Tricks überlegt. Ich kann Ihnen immer vertrauen!