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

Question

我们有一个日历应用程序，用户可以单击向右或向左箭头以移至下个月或上个月。单击其中一个箭头会调用 jquery ajax 来加载并绘制相关月份信息(整个过程大约需要一秒钟)。

如果用户需要朝一个方向移动五到六个月，他们通常会非常快速地单击箭头，从而进行多次 ajax 调用。

如果处理尚未完成，“放弃”所有先前的调用并仅处理最新的调用，最好的方法是什么？

例如，如果日历显示 1 月，并且用户快速单击五次以显示 6 月，则应避免处理(客户端)2 月 - 5 月。

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