Question

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

如果用户需要在一个方向上移动五六个月，他们通常会非常快速地单击箭头，从而发出多个ajax调用。

如果所有以前的呼叫处理尚未完成并且仅处理最新呼叫，最好的方法是“掉线”？

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

Answer 1

您应该有一个存储最后一个值（月）的变量。应该在启动Ajax之前设置此变量（单击事件处理程序中的第一件事），然后在Ajax返回时检查您的Ajax调用是否确实是最后一个值。您的Ajax调用应返回月份以及其他响应，因此您可以与变量进行比较。

Answer 2

一种可能性是，每个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">

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

2 个答案: