Обработка нескольких запросов AJAX - используйте только последний запрос

Question

У нас есть приложение календаря, в котором пользователь может щелкнуть стрелку вправо или влево, чтобы перейти к следующему или предыдущему месяцу. Щелчок по одной из стрелок вызывает вызов jquery ajax для загрузки и получения соответствующей информации о месяце (весь процесс занимает около одной секунды).

Если пользователю необходимо переместиться на пять или шесть месяцев в одном направлении, он обычно очень быстро нажимает на стрелку, делая несколько вызовов AJAX.

Каков наилучший способ «отбросить» все предыдущие вызовы, если их обработка еще не завершена и обрабатывать только последний вызов?

Например, если в календаре отображается январь и пользователь быстро щелкает пять раз, чтобы отобразить июнь, следует избегать обработки (на стороне клиента) для февраля - мая.

Answer 1

Одна возможность может быть для каждого вызова API, маршрутизируемого через Promise.race, который использует вызов API, и другой созданный Promise, который отклоняет, если будет выполнен другой вызов API до разрешения текущего вызова. Например:

// 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

У вас должна быть переменная, хранящая последнее значение (месяц). Эта переменная должна быть установлена ​​ДО того, как вы запустите Ajax (первым делом в обработчике события click). Затем, когда Ajax возвращается, вы проверяете, действительно ли ваш вызов Ajax является последним значением. Ваш Ajax-вызов должен возвращать месяц и другой ответ, чтобы вы могли сравнить его с вашей переменной.