Wie rufe ich das RESIZE-Ereignis von JQuery nur auf, wenn die Größenänderung abgeschlossen ist?

Verwenden von JQuery zum Aufrufen des RESIZE-Ereignisses, wenn die Größenänderung abgeschlossen ist

Bei der Entwicklung reaktionsfähiger Anwendungen ist es häufig erforderlich, Änderungen der Browserfenstergröße zu verfolgen, um die anzupassen Benutzeroberfläche entsprechend. Das kontinuierliche Aufrufen einer Größenänderungsfunktion während der manuellen Größenänderung des Fensters kann jedoch zu übermäßigen Funktionsaufrufen führen.

Um dieses Problem zu beheben, bietet JQuery eine Möglichkeit, die Größenänderungsfunktion nur einmal aufzurufen, nachdem die Größenänderung des Fensters abgeschlossen ist.

Lösung mit setTimeout()

Verwenden Sie im Resize-Ereignis-Listener von JQuery ein setTimeout() Funktion, um die gewünschte Aktion mit einer angegebenen Verzögerung aufzurufen. Dadurch wird sichergestellt, dass die Funktion erst aufgerufen wird, nachdem die Größenänderung gestoppt wurde.

$(window).resize(function() {
  if (this.resizeTO) clearTimeout(this.resizeTO);
  this.resizeTO = setTimeout(function() {
    $(this).trigger('resizeEnd');
  }, 300);
});

$(window).on('resizeEnd', function() {
  // Code to be executed after resizing is complete
});

In dieser Lösung wird ein benutzerdefiniertes resizeEnd-Ereignis nach einer Verzögerung von 300 ms ausgelöst, wodurch garantiert wird, dass es erst auftritt, nachdem die Größenänderung abgeschlossen ist.

Andere Lösung mit setInterval()

Alternativ können Sie verwenden setInterval() um kontinuierlich zu prüfen, ob sich die Fenstergröße geändert hat. Wenn die Größe für eine bestimmte Dauer stabil bleibt, wird die Größenänderungsfunktion aufgerufen.

var resizeInterval;
window.onresize = function() {
  if (resizeInterval) clearInterval(resizeInterval);
  resizeInterval = setInterval(function() {
    if (window.innerWidth == previousWidth && window.innerHeight == previousHeight) {
      clearInterval(resizeInterval);
      // Code to be executed after resizing is complete
    }
  }, 300);
  previousWidth = window.innerWidth;
  previousHeight = window.innerHeight;
};

Bei beiden Lösungen kann der Verzögerungswert entsprechend den Anforderungen der Anwendung angepasst werden.

Das obige ist der detaillierte Inhalt vonWie rufe ich das RESIZE-Ereignis von JQuery nur auf, wenn die Größenänderung abgeschlossen ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!