处理多个 ajax 请求 - 仅使用最后一个请求

Question

We have a calendar application where the user can click the right or left arrow in order to move to the next or previous month. A click on one of the arrows makes a jquery ajax call to load and draw the relevant month info (entire process takes about one second).

If a user needs to move five or six months in one direction, they usually click on the arrow very quickly thus making multiple ajax calls.

What is the best way to 'drop' all previous calls if their processing hasnt completed and handle only the latest call?

For example if the calendar is showing January and the user clicks five times quickly to show June, processing (client side) for February - May should be avoided.

Answer 1

One possibility would be for each API call to be routed through a Promise.race , which uses the API call and another constructed Promise that rejects if another API call is made before the current call resolves. For example:

 // API call resolves after 800 ms: const apiCall = () => new Promise(res => setTimeout(res, 800, 'foobar')); let lastReject; function doCall() { if (lastReject) lastReject(); Promise.race([ apiCall(), new Promise((_, rej) => { lastReject = rej; }) ]) .then((resp) => { console.log('API response: ' + resp); }) .catch(() => { console.log('Quick click: previous ongoing API call will be ignored'); }); } document.querySelector('input').onclick = doCall;

 <input type="button" value="Click to make API call">

Answer 2

You should have a variable storing the last value (month). This variable should be set BEFORE you start your Ajax (first thing in click eventhandler).Then, when Ajax returns, you check if your Ajax call is Indeed the last value. Your Ajax call should return the month as well as other response, so you can compare with your variable.

Answer 3

I had a similar issue... what I did was implement a debounce function, here's a snippet of my code... hopefully this helps

  genJobOccurrences() {
    //this doesn't call the function until the user stops clicking for >= 600ms
    this.debounce(this.jobOccurrencesAPICalls, 600)(payload);
  },

  async jobOccurrencesAPICalls(payload: OccurrencePayload) {
     //api call
      await this.fetchCalendarEvents(payload);
  }

this is my debounce function

 debounce(fn: Function, delay = 1000) {
  // if should this only be within the scope of the function? let timer = 0 else use a global timer
  if (this.timer) clearTimeout(this.timer);

  return (...args: any[]) => {
    this.timer = setTimeout(() => {
      fn(...args);
    }, delay);
  };
}

hope this helps :)