jquery - 如何对 jQuery ajax 请求进行排队？

Question

我做了很多搜索，但我认为找不到我要找的东西。

我有一个类似于 Twitter 工作方式的系统，您只需单击一个按钮即可添加(或在 Twitter 中关注)多个人。

例如，每次我单击下面的“添加”按钮时，它都会发出 AJAX 请求以将它们添加到数据库中。

<ul>
    <li>Ben <a href="#" onclick="return addPerson(1);">Add</a></li>
    <li>Sarah <a href="#" onclick="return addPerson(2);">Add</a></li>
    <li>Chantelle <a href="#" onclick="return addPerson(3);">Add</a></li>
    <li>Alan <a href="#" onclick="return addPerson(4);">Add</a></li>
</ul>

现在，如果我依次为每个人单击“添加”按钮，我认为为每个人排队一个 ajax 请求并不是一种很好的资源利用方式。而且速度会很慢。

我在想的是，在我点击每个“添加”按钮后，可能会出现延迟或类似的情况。因此它会记录我点击的所有人员的 ID，并为所有点击的人员发送一个 ajax 请求。

是否有现有脚本或者您可以推荐我如何做到这一点？

Answer 1

像这样的东西会起作用吗？

var sendDelay;
var peopleToSend = [];
addPerson = function(id) {
   if (sendDelay!=null) {
      clearTimeout(sendDelay);  // Clear timeout
   }
   sendDelay=setTimeout(addPersonDelayComplete,2000);  // Reset timeout
   peopleToSend.push(id);  // Add person to array
}

addPersonDelayComplete = function() {
   // Send the people in peopleToSend in a single ajax call here
   peopleToSend.length = 0;  // Reset the array
 }