Wie löst man eine Aktion erst aus, nachdem das Größenänderungsereignis abgeschlossen ist?

Warten auf das Ende des „Resize“-Ereignisses, um eine Aktion auszulösen

Bei der Arbeit mit responsivem Design ist es oft wünschenswert, eine Aktion auszuführen Aktion erst, nachdem der Größenänderungsvorgang vollständig abgeschlossen ist. Allerdings kann die herkömmliche Ereignisbehandlung mit $(window).resize() während des Größenänderungsprozesses mehrere Aufrufe auslösen, was zu unerwünschtem Verhalten führt.

Lösung: Verwendung von setTimeout() und clearTimeout()

Um das gewünschte Verhalten zu erreichen, kann eine Kombination aus setTimeout() und clearTimeout() verwendet werden. Hier ist ein Beispiel:

function resizedw() {
  // Haven't resized in 100ms!
}

var doit;
window.onresize = function () {
  clearTimeout(doit);
  doit = setTimeout(resizedw, 100);
};

Dieser Ansatz verwendet einen Timer, um die Ausführung der resizedw()-Funktion zu verzögern. Wenn das Größenänderungsereignis auftritt, werden alle vorhandenen Timer gelöscht und ein neuer gestartet. Wenn der Größenänderungsvorgang innerhalb von 100 Millisekunden fortgesetzt wird, wird der Timer erneut zurückgesetzt. Erst wenn die Größenänderung 100 Millisekunden lang angehalten wurde, wird die Funktion resizedw() aufgerufen.

Beispiel für jsfiddle:

Ein funktionierendes Beispiel dieser Lösung finden Sie hier zum jsfiddle-Link in der Antwort.

Das obige ist der detaillierte Inhalt vonWie löst man eine Aktion erst aus, nachdem das Größenänderungsereignis abgeschlossen ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!