Wie kann ich verhindern, dass mehrere AJAX-Abfragen ausgeführt werden, wenn die Schaltfläche "prev" mehrfach angeklickt wird

Question

Ich habe meinen Kalender standardmäßig in der "agendaWeek" -Ansicht. Ich verwende "Ereignisse (als eine Funktion)", um dynamische Ereignisdaten einzuziehen.

Um schnell zu einer Woche zu gelangen, die ich gerne sehen würde, klicke ich mehrmals schnell auf "prev". Die Schnittstelle holt schnell auf, aber jeder Klick löst eine Ajax-Anfrage aus. Dies ist nicht ideal, weil es die Antwortzeit für die gewünschte Woche verlangsamt, da die Ajax-Anfrage jeder dazwischenliegenden Woche verarbeitet werden muss.

Wie kann dies gelindert werden? Mein Gedanke ist, dass dies wirklich eine Feature-Anfrage ist. Die Bibliothek sollte etwa 300 Millisekunden warten, bevor sie die "Ereignis" -Funktion ausführt.

Answer 1

Es klingt wie Sie die ajaxing Funktion zum Entprellen müssen:

The Debounce technique allow us to "group" multiple sequential calls in a single one.

Here's die neueste lodash-Implementierung, die ich verwenden würde.

Answer 2

Benutzer Observablen es wird Ihnen die Lösung Ihres Problems helfen observable

auch diesen Artikel lesen von Link http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

dieser Code über seine wahre ist die in Winkel aber man kann überall Observablen verwenden.

constructor(private wikipediaService: WikipediaService) { 
    this.term.valueChanges 
      .debounceTime(400) 
      .subscribe(term => this.wikipediaService.search(term).then(items => this.items = items)); 
    } 

Answer 3

function delayAjax(ajaxCall){ 
    clearTimeout(myFn); 

    myFn = setTimeout(ajaxCall(), 300) 

} 

und

<button id="btnNext" onclick="delayAjax(ajaxCall);"><button> 

so ähnlich ...

Answer 4

Ich war in der Lage, die Entprellen zu arbeiten, indem Sie die eventSources und Rückgabe eines Array von Funktionen, eine für jede Ereignisquelle. Die getSources Funktion ist einfach für die Bequemlichkeit. In der fullCalendar Konfiguration hätten wir:

... 
eventSources: getSources(), 
... 

und die Funktionen Code:

let source1Params = {}; 
let source2Params = {}; 

let debouncedSource1 = debounce(
    function() { 
    $.ajax({ 
     url: 'source/1/feed', 
     dataType: 'json', 
     data: { 
     start: source1Params.start, 
     end: source1Params.end 
     }, 
     success: function(response) { 
     // Parse the response into an event list 
     let eventList = ... 
     source1Params.callback(eventList); 
     } 
    }); 
    }, 200 
); 

let debouncedSource2 = debounce(
    function() { 
    $.ajax({ 
     url: 'source/2/feed', 
     dataType: 'json', 
     data: { 
     start: source2Params.start, 
     end: source2Params.end 
     }, 
     success: function(response) { 
     // Parse the response into an event list 
     let eventList = ... 
     source2Params.callback(eventList); 
     } 
    }); 
    }, 200 
); 

function getSources() { 
    return [ 
    { 
     id: 'source1', 
     events: (start, end, timezone, callback) => { 
     source1Params = { 
      'start': start, 
      'end': end, 
      'timezone': timezone, 
      'callback': callback 
     }; 
     debouncedSource1(); 
     } 
    }, 
    { 
     id: 'source2', 
     events: (start, end, timezone, callback) => { 
     source2Params = { 
      'start': start, 
      'end': end, 
      'timezone': timezone, 
      'callback': callback 
     }; 
     debouncedPlanned(); 
     } 
    } 
    ]; 
} 

Diese teilweise funktioniert, dh wenn Sie die nächste oder vorherige Schaltflächen klicken nacheinander, es wird die mehrere Anfragen zu verhindern, Senden nur der letzte wie gewünscht. Allerdings hat dies auch mehrere Einschränkungen:

• Der loading Rückruf in der Konfiguration wird nicht mehr funktionieren. Dies liegt daran, wie die loadingLevel intern implementiert ist, wird es durch das schnelle Klicken erhöht, aber nicht reduziert, also nie Null erreichen, die den Rückruf auslöst.
• Wenn Sie auf Weiter klicken, warten, bis der Entprellungstimer beendet ist und die Ladeoperation gestartet wird, und beim Laden erneut auf Weiter klicken, führt dies zu unvorhersehbaren Ergebnissen, wobei Ereignisse nicht gerendert werden. Meine Lösung ist jetzt, die Navigationsschaltflächen zu deaktivieren, während Ereignisse geladen werden. Dies behebt das Problem, macht jedoch die Navigation weniger reaktionsfähig.