Wie führe ich Aktionen erst aus, nachdem ein Größenänderungsvorgang abgeschlossen ist?

Warten auf das „Ende“ des „Resize“-Ereignisses für eine optimale Aktionsausführung

Bei der ereignisgesteuerten Programmierung ist es üblich, die Größe zu handhaben Änderungen mithilfe des Ereignisses „resize“, das normalerweise einem Fenster oder einem anderen in der Größe veränderbaren Element zugewiesen wird. Wenn jedoch Größenänderungsvorgänge stattfinden, wird das „Resize“-Ereignis während des Prozesses mehrmals ausgelöst, was zu einer redundanten Ausführung Ihres Event-Handlers führt.

Erfassen des „Endes“ eines „Resize“-Ereignisses

Um dieses Problem zu beheben und eine Aktion erst dann auszuführen, wenn die Größenänderung abgeschlossen ist, können wir eine Technik anwenden, die die Verwendung von „setTimeout()“ und „clearTimeout()“ beinhaltet.

Lösung:

Erstellen Sie eine Funktion, „resizedw()“, die als Ereignishandler für die Größenänderungsaktion dient.

function resizedw() {
  // Your action to be performed when resizing finishes
}

Deklarieren Sie eine Variable, 'doit' und initialisieren Sie es als 'null'. Diese Variable enthält die von „setTimeout()“ zurückgegebene Timeout-ID.

var doit = null;

Hängen Sie den Ereignis-Listener an das „onresize“-Ereignis des „window“-Objekts an.

window.onresize = function() {

Verwenden Sie „clearTimeout()“, um alle ausstehenden Timeout-Anforderungen abzubrechen, die mit der Variablen „doit“ verknüpft sind.

  clearTimeout(doit);

Weisen Sie das Ergebnis von „setTimeout()“ der Variablen „doit“ zu. Dadurch wird die Ausführung von „resizedw()“ nach einer Verzögerung von 100 Millisekunden geplant.

  doit = setTimeout(resizedw, 100);
};

Wenn der Größenänderungsvorgang endet, wird der Ereignishandler „onresize“ aufgerufen, ohne „resizedw()“ sofort auszulösen . Nach der festgelegten Verzögerung (100 Millisekunden) wird „resizedw()“ ausgeführt und markiert den Abschluss des Größenänderungsprozesses.

Beispielcode:

Der folgende Code demonstriert die Implementierung dieses Ansatzes:

function resizedw() {
  // Your action to be performed when resizing finishes
  console.log('Resizing finished!');
}

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

Diese Lösung behandelt das Ereignis „Größe ändern“ effektiv, indem sie verhindert, dass die zugehörige Aktion während des Größenänderungsprozesses ausgeführt wird. Stattdessen wird die Aktion erst ausgelöst, nachdem der Größenänderungsvorgang vollständig abgeschlossen ist.

Das obige ist der detaillierte Inhalt vonWie führe ich Aktionen erst aus, nachdem ein Größenänderungsvorgang abgeschlossen ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!