时间戳

首页 > 解决方案 > 处理多个 ajax 请求 - 仅使用最后一个请求

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

问题描述

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

如果用户需要在一个方向移动五六个月，他们通常会很快点击箭头，从而进行多次 ajax 调用。

如果他们的处理尚未完成并且只处理最新的呼叫，那么“放弃”所有先前呼叫的最佳方式是什么？

例如，如果日历显示一月并且用户快速单击五次以显示六月，则应避免处理（客户端）二月 - 五月。

标签： jqueryajax

解决方案

一种可能性是每个 API 调用都通过 a 进行路由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">

推荐阅读