如何防止多次ajax查询在多次单击“prev”按钮上运行

Question

I have my calendar on "agendaWeek" view by default. I'm using "events (as a function)" in order to pull in dynamic event data.

In order to quickly get to a week I'd like to view, I click multiple times on "prev" quickly. The interface catches up quickly, but each click triggers an ajax request. This is not ideal because it slows the response time right down for the desired week, as each intervening week's ajax request must be processed.

How can this be alleviated? My thinking is that this is a feature request really. The library should wait say 300 milliseconds before executing "event" function.

Answer 1

It sounds like you need to debounce the ajaxing function:

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

Here's the latest lodash implementation, which is what I'd use.

Answer 2

function delayAjax(ajaxCall){
    clearTimeout(myFn);

    myFn = setTimeout(ajaxCall(), 300)

}

and

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

something like that...

Answer 3

I was able to get the debounce to work by using the eventSources and returning an array of functions, one for each event source. The getSources function is simply for convenience. In the fullCalendar configuration we would have:

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

And the functions 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();
      }
    }
  ];
}

This works partially, ie if you click the next or prev buttons consecutively, it will prevent the multiple requests, sending only the last one as desired. However this also has multiple caveats:

• The loading callback in the configuration will no longer work. This is because how the loadingLevel is implemented internally, it will be increased by the fast clicking, but not reduced, hence never reaching zero, that triggers the callback.
• Clicking next, waiting for the debounce timer to end and the load to start, and clicking next again while it's loading will result in unpredictable results, with events not being rendered. My solution right now is disabling the navigation buttons while events are loading. This fixes the problem but makes navigation less responsive.

Answer 4

user observables it will help you solving your problem observable

also read this article http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

this code is from link above its true its in angular but you can use observables everywhere.

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