Heim > Web-Frontend > js-Tutorial > Wie löst man ein jQuery-Größenänderungsereignis nur einmal aus, nachdem die Größenänderung abgeschlossen ist?

Wie löst man ein jQuery-Größenänderungsereignis nur einmal aus, nachdem die Größenänderung abgeschlossen ist?

Linda Hamilton
Freigeben: 2024-11-27 02:03:10
Original
560 Leute haben es durchsucht

How to Trigger a jQuery Resize Event Only Once After Resizing is Complete?

So rufen Sie das jQuery-Größenänderungsereignis nur einmal auf, nachdem die Größenänderung abgeschlossen ist

Problemübersicht

Wenn Sie das Resize-Ereignis von jQuery zum Aufrufen einer Funktion verwenden, wird diese möglicherweise wiederholt aufgerufen, wenn der Benutzer die Größe des Browserfensters ändert. Ziel ist es, die Funktion nur einmal auszulösen, wenn die Größenänderung abgeschlossen ist.

Lösung

Um dies zu erreichen, können wir die Funktion setTimeout und eine Timeout-Variable verwenden:

var timeout;
$(window).resize(function() {
  // Function to execute when resizing is complete
  timeout = setTimeout(function() {
    // Execute the desired function
  }, 30);
});
Nach dem Login kopieren

Indem wir ein Timeout von 30 Millisekunden festlegen, verzögern wir die Ausführung der Funktion, bis die Größenänderung mindestens gestoppt wurde 30 Millisekunden. Dadurch wird sichergestellt, dass die Funktion nur einmal aufgerufen wird.

Zusätzliche Überlegungen

Wenn der Benutzer vor Ablauf des Timeouts eine weitere Größenänderungsaktion initiiert, wird das vorherige Timeout gelöscht und a Es wird ein neues eingestellt. Dadurch wird sichergestellt, dass die Funktion nach der endgültigen Größenänderung immer nur einmal ausgeführt wird.

Achtung: Die Verwendung globaler Variablen, wie z. B. Timeout, sollte nach Möglichkeit vermieden werden. In diesem Fall ist jedoch die Verwendung einer Timeout-Variable erforderlich, um den Status der Ereignisbehandlung aufrechtzuerhalten.

Das obige ist der detaillierte Inhalt vonWie löst man ein jQuery-Größenänderungsereignis nur einmal aus, nachdem die Größenänderung abgeschlossen ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage