Wie reagiert man auf ein Javascript-Ereignis nur, wenn es einmal ausgelöst wurde und dann innerhalb eines bestimmten Zeitraums nicht erneut ausgelöst wird?

Question

In meiner Anwendung höre ich auf das Google Maps API 'bounds_changed' Ereignis, um einen Ajax-Aufruf zu senden und einige div auf der Webseite basierend auf den neuen Grenzen der Karte zu aktualisieren:

google.maps.event.addListener(map, 'bounds_changed', function() {
  // hier erfolgt ein Ajax-Aufruf
}

Das Ereignis 'bounds_changed' wird mit hoher Frequenz ausgelöst, wenn der Benutzer die Karte herumschiebt. So sehr, dass zu viele Ajax-Anfragen an den Server gesendet werden.

Grundsätzlich möchte ich den Ajax-Aufruf nur durchführen, nachdem der Benutzer aufgehört hat, die Karte für einen bestimmten Zeitraum zu verschieben (zum Beispiel 500 ms). Ich bin nicht sehr erfahren mit Javascript und habe versucht, dies mit setTimeout und clearTimeout zu erreichen, aber ohne Erfolg.

Jeder Vorschlag wäre willkommen :)

Answer 1

Eine schnelle und einfache Lösung wäre, den Server weniger häufig aufzurufen:

var requestCounter = 0;
var frequency = 50;

google.maps.event.addListener(map, 'bounds_changed', function() {
    if((++requestCounter % frequency) == 0){
            // hier erfolgt ein Ajax-Aufruf (optional kann hier auch der Zähler zurückgesetzt werden)
    }
});

Alternativ habe ich etwas Ähnliches gemacht, wo ich einen Timer jedes Mal zurückgesetzt habe, wenn ich etwas vom Benutzer "gehört" habe. Sobald der Timer abgelaufen war, hat er meine Aktion aufgerufen. Der Timer versucht also kontinuierlich auszulösen, aber wenn der Benutzer etwas tut, wird der Timer zurückgesetzt. Irgendwann hört der Benutzer lange genug auf sich zu bewegen, dass der Timer die Chance hat, sein Ereignis auszulösen.

---

BEARBEITEN:
Entlang der Linien von:

google.maps.event.addListener(map, 'bounds_changed', userInput);

function userInput() {
    resetTimer();
}

Wo resetTimer() deinen Timer löscht/startet. Das würde so aussehen:

var inputTimer = null;
var timeLimit = 500;

function resetTimer() {
    if(inputTimer != null) clearInterval(inputTimer);
    inputTimer = setTimeout('contactServer()', timeLimit);
}

function contactServer() {
    // hier erfolgt ein Ajax-Aufruf
}

Ich habe nicht getestet, ob das kompiliert, aber es sollte dir die grundlegende Idee geben. Dieser Code hat den Vorteil, modulare genug zu sein, um in vielen anderen Sprachen mit nur geringfügigen Änderungen zu funktionieren. Ich folge einer ähnlichen Logik in ActionScript. Außerdem ist er extrem einfach zu lesen, logisch zu folgen und zu pflegen (6 Monate später, wenn du vergessen hast, wie dein Code funktioniert).

Ich hoffe, das hilft auf irgendeine Weise,

--gMale