Wie verhindert man mehrere „Größenänderung'-Ereignisauslöser in JavaScript?

Verwaltung mehrerer Auslöser des „Resize“-Ereignisses

Entwickler stehen häufig vor dem Problem, während des Größenänderungsprozesses mehrere Auslöser des „Resize“-Ereignisses zu verarbeiten. Dies kann zu unerwünschtem Verhalten oder Ineffizienz führen. Um sicherzustellen, dass nur die gewünschte Aktion einmal ausgeführt wird, ist es wichtig zu verstehen, wie man auf das „Ende“ des „Resize“-Ereignisses wartet.

Ein gängiger Ansatz, wie im angegebenen Codebeispiel gezeigt, ist die Verwendung des $ (window).resize(function(){resizedw();}) Methode. Diese Methode löst jedoch während des laufenden Größenänderungsprozesses mehrmals die Funktion resizedw() aus.

Um dies zu überwinden, können wir die Methoden setTimeout() und clearTimeout() nutzen. Mit dieser Strategie können wir eine Verzögerung festlegen, bevor die Funktion resizedw() ausgelöst wird. Durch Festlegen eines Timeouts von beispielsweise 100 ms können wir eine bestimmte Zeitspanne warten, um sicherzustellen, dass die Größenänderung abgeschlossen ist. Während dieser Verzögerung wird der Timer durch alle neuen Größenänderungsereignisse „zurückgesetzt“, wodurch sichergestellt wird, dass er erst dann ausgeführt wird, wenn der Größenänderungsprozess wirklich abgeschlossen ist.

Hier ist ein Codebeispiel zur Veranschaulichung dieses Ansatzes:

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

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

Dieses Codebeispiel finden Sie zur Vereinfachung auf jsfiddle.

Das obige ist der detaillierte Inhalt vonWie verhindert man mehrere „Größenänderung'-Ereignisauslöser in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!