Also benutze ich momentan so etwas wie:
$(window).resize(function(){resizedw();});
Dies wird jedoch viele Male aufgerufen, während die Größenänderung fortgesetzt wird. Ist es möglich, ein Ereignis zu erfassen, wenn es endet?
Also benutze ich momentan so etwas wie:
$(window).resize(function(){resizedw();});
Dies wird jedoch viele Male aufgerufen, während die Größenänderung fortgesetzt wird. Ist es möglich, ein Ereignis zu erfassen, wenn es endet?
.one()
damit es erst ausgeführt wird, nachdem alle Größenänderungen vorgenommen wurden und nicht immer wieder?Antworten:
Ich hatte Glück mit der folgenden Empfehlung: http://forum.jquery.com/topic/the-resizeend-event
Hier ist der Code, damit Sie nicht den Link und die Quelle seines Beitrags durchsuchen müssen:
Danke sime.vidas für den Code!
quelle
new Date(-1E12)
B. JSLint warnt vor der Verwendung00
.rtime: Date; .... if (+new Date() - +rtime < delta)
und in Typoskript sollte die Größenänderungsfunktion eine Pfeilfunktion wie diese seinresizeend=()=>
. Da in der Funktionthis
zum Ändern der Größe auf das Fensterobjekt verweisen.Sie können
setTimeout()
und verwendenclearTimeout()
Codebeispiel auf jsfiddle .
quelle
$(document)
auf Benutzer beschränkt, die Microsoft Windows und anfällige Versionen des Internet Explorers ausführenDies ist der Code, den ich gemäß der Antwort von @Mark Coleman schreibe:
Danke Mark!
quelle
resizeTimer
eine globale Variable, dh sie ist nicht definiertwindow
, also genau so wie hier. Nur dieses Beispiel ist besser, da Sie die Variable nicht extern definieren müssen. Es ist auch sinnvoll, diese Variable zumwindow
Objekt hinzuzufügen, da dies das Objekt ist, an das der Ereignis-Listener gebunden ist.Internet Explorer bietet ein resizeEnd Ereignis. Andere Browser lösen das Größenänderungsereignis viele Male aus, während Sie die Größe ändern.
Hier finden Sie weitere gute Antworten, die zeigen, wie Sie setTimeout und das .throttle verwenden ..debounce- Methoden von lodash und Unterstrich, daher werde ich Ben Almans jQuery-Plugin für die Drosselklappenentprellung erwähnen das erreicht, wonach Sie .
Angenommen, Sie haben diese Funktion, die Sie nach einer Größenänderung auslösen möchten:
Drosselklappenbeispiel
Im folgenden Beispiel
onResize()
wird während einer Fenstergrößenänderung nur einmal alle 250 Millisekunden aufgerufen.Entprellungsbeispiel
Im folgenden Beispiel
onResize()
wird nur einmal am Ende einer Fenstergrößenänderungsaktion aufgerufen. Dies erzielt das gleiche Ergebnis, das @Mark in seiner Antwort präsentiert.quelle
Mit Underscore.js gibt es eine elegante Lösung. Wenn Sie sie also in Ihrem Projekt verwenden, können Sie Folgendes tun:
Das sollte reichen :) Aber wenn Sie mehr darüber lesen möchten, können Sie meinen Blog-Beitrag lesen -
http://rifatnabi.com/post/detect-end-of-jquery-resize-event-using-underscore -debounce(Deadlink)quelle
lodash
Eine Lösung besteht darin, jQuery um eine Funktion zu erweitern, z.
resized
Beispielnutzung:
$(window).resized(myHandler, 300);
quelle
Sie können eine Referenz-ID für jedes setInterval oder setTimeout speichern. So was:
Um dies ohne eine "globale" Variable zu tun, können Sie der Funktion selbst eine lokale Variable hinzufügen. Ex:
quelle
Sie können verwenden
setTimeout()
undclearTimeout()
in Verbindung mitjQuery.data
:Aktualisieren
Ich habe eine Erweiterung geschrieben , um den Standard
on
(&bind
) -Event-Handler von jQuery zu verbessern . Es fügt den ausgewählten Elementen eine Ereignishandlerfunktion für ein oder mehrere Ereignisse hinzu, wenn das Ereignis für ein bestimmtes Intervall nicht ausgelöst wurde. Dies ist nützlich, wenn Sie einen Rückruf erst nach einer Verzögerung auslösen möchten, z. B. nach dem Größenänderungsereignis oder sonst. https://github.com/yckart/jquery.unevent.jsVerwenden Sie es wie jeden anderen
on
oderbind
-event-Handler, außer dass Sie als letzten einen zusätzlichen Parameter übergeben können:http://jsfiddle.net/ARTsinn/EqqHx/
quelle
Es gibt eine viel einfachere Methode, um eine Funktion am Ende der Größenänderung auszuführen, als die Deltazeit zwischen zwei Aufrufen zu berechnen. Gehen Sie einfach so vor:
Und das Äquivalent für Angular2 :
Verwenden Sie für die Winkelmethode die
() => { }
Notation insetTimeout
, um den Gültigkeitsbereich beizubehalten. Andernfalls können Sie keine Funktionsaufrufe ausführen oder verwendenthis
.quelle
Dies ist eine Modifikation des obigen Dolan-Codes. Ich habe eine Funktion hinzugefügt, die die Fenstergröße zu Beginn der Größenänderung überprüft und mit der Größe am Ende der Größenänderung vergleicht, wenn die Größe entweder größer oder kleiner als der Rand ist ( zB 1000) dann wird es neu geladen.
quelle
Mark Colemans Antwort ist sicherlich weitaus besser als die ausgewählte Antwort, aber wenn Sie die globale Variable für die Timeout-ID (die
doit
Variable in Marks Antwort) , können Sie eine der folgenden :(1) Verwenden Sie einen sofort aufgerufenen Funktionsausdruck (IIFE), um einen Abschluss zu erstellen.
(2) Verwenden Sie eine Eigenschaft der Ereignishandlerfunktion.
quelle
Ich habe selbst eine kleine Wrapper-Funktion geschrieben ...
Hier ist die Verwendung:
quelle
quelle
Nun, für den Fenstermanager ist jedes Größenänderungsereignis eine eigene Nachricht mit einem unterschiedlichen Anfang und Ende. Technisch gesehen ist es also jedes Mal das Ende, wenn die Fenstergröße geändert wird .
Vielleicht möchten Sie Ihre Fortsetzung jedoch verzögern? Hier ist ein Beispiel.
quelle
Hier ist ein SEHR einfaches Skript, um sowohl ein 'resizestart'- als auch ein' resizeend'-Ereignis für das Fensterobjekt auszulösen.
Es ist nicht nötig, sich mit Datum und Uhrzeit zu beschäftigen.
Die
d
Variable gibt die Anzahl der Millisekunden zwischen Größenänderungsereignissen vor dem Auslösen des Größenänderungs-Endereignisses an. Sie können damit spielen, um die Empfindlichkeit des Endereignisses zu ändern.Um diese Ereignisse anzuhören, müssen Sie lediglich Folgendes tun:
resizestart:
$(window).on('resizestart', function(event){console.log('Resize Start!');});
Größe ändern:
$(window).on('resizeend', function(event){console.log('Resize End!');});
quelle
Dies ist, was ich zum Verzögern von wiederholten Aktionen verwende. Es kann an mehreren Stellen in Ihrem Code aufgerufen werden:
Verwendung:
quelle
da die ausgewählte Antwort nicht wirklich funktioniert hat .. und wenn Sie jquery nicht verwenden, finden Sie hier eine einfache Drosselfunktion mit einem Beispiel für die Verwendung bei der Fenstergrößenänderung
quelle
Dies funktionierte für mich, da ich keine Plugins verwenden wollte.
Rufen Sie beim Ändern der Fenstergröße "setFn" auf, um die Fensterbreite abzurufen, und speichern Sie sie als "originalWindowSize". Rufen Sie dann "checkFn" auf, das nach 500 ms (oder Ihrer Präferenz) die aktuelle Fenstergröße erhält und das Original mit der aktuellen vergleicht. Wenn diese nicht identisch sind, wird die Größe des Fensters immer noch geändert. Vergessen Sie nicht, Konsolenmeldungen in der Produktion zu entfernen, und (optional) kann "setFn" selbst ausführen.
quelle
Dies funktionierte für das, was ich in Chrom versuchte. Der Rückruf wird erst 200 ms nach dem letzten Größenänderungsereignis ausgelöst.
quelle
AKTUALISIEREN!
Eine bessere Alternative, die auch von mir erstellt wurde, ist hier: https://stackoverflow.com/a/23692008/2829600 (unterstützt "Löschfunktionen")
ORIGINAL POST:
Ich habe diese einfache Funktion zur Behandlung von Ausführungsverzögerungen geschrieben, die in jQuery .scroll () und .resize () nützlich ist. Daher wird callback_f für eine bestimmte ID-Zeichenfolge nur einmal ausgeführt.
quelle
$(window).resize(function() { delay_exec('test1', 30, function() { ... delayed stuff here ... }); });
? Ansonsten ziemlich sauberer Code. Danke für das Teilen. :)ResizeStart- und ResizeEnd- Ereignisse für Fenster
http://jsfiddle.net/04fLy8t4/
Ich habe eine Funktion implementiert, die zwei Ereignisse im Benutzer-DOM-Element auslöst:
Code:
quelle
quelle
Ich weiß nicht, ob mein Code für andere funktioniert, aber es macht wirklich einen tollen Job für mich. Ich kam auf diese Idee, indem ich Dolan Antenucci-Code analysierte, weil seine Version für mich nicht funktioniert und ich hoffe wirklich, dass sie jemandem helfen wird.
quelle
Ich habe eine Funktion geschrieben, die eine Funktion übergibt, wenn sie in ein Größenänderungsereignis eingeschlossen wird. Es wird ein Intervall verwendet, damit die Größenänderung nicht ständig Timeout-Ereignisse erzeugt. Auf diese Weise kann es unabhängig vom Größenänderungsereignis ausgeführt werden, mit Ausnahme eines Protokolleintrags, der in der Produktion entfernt werden soll.
https://github.com/UniWrighte/resizeOnEnd/blob/master/resizeOnEnd.js
}}
quelle