Wie führe ich eine Funktion nur einmal aus, nachdem die Fenstergröße in JavaScript/jQuery geändert wurde?

Verzögerte Ausführung nach Fenstergrößenänderung in JavaScript/jQuery

Das $(window).resize-Ereignis in JavaScript und jQuery wird beim Öffnen des Browsers ausgelöst Fenstergröße ändert sich. Bei der manuellen Größenänderung durch Ziehen am Fensterrand wird es jedoch häufig mehrmals ausgelöst.

Einmaligen Aufruf erreichen:

So rufen Sie eine Funktion nur einmal auf, nachdem die Größe geändert wurde Wenn die Größenänderung abgeschlossen ist, kann ein Timer verwendet werden, um die Ausführung zu verzögern, bis der Größenänderungsprozess abgeschlossen ist. Hier ist eine Lösung:

Lösung:

<code class="javascript">var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();</code>

Verwendung:

<code class="javascript">$(window).resize(function () {
    waitForFinalEvent(function(){
      alert('Resize...');
      //...
    }, 500, "some unique string");
});</code>

In dieser Lösung ein Unikat Die Kennung wird für jeden Rückruf verwendet, um mehrere Ereignisregistrierungen zu verarbeiten.

Dieser Ansatz stellt sicher, dass die Rückruffunktion nach einer angegebenen Verzögerung nur einmal aufgerufen wird, sodass genügend Zeit für den Abschluss der Größenänderung bleibt und eine redundante Ereignisauslösung verhindert wird.

Das obige ist der detaillierte Inhalt vonWie führe ich eine Funktion nur einmal aus, nachdem die Fenstergröße in JavaScript/jQuery geändert wurde?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!