我如何构建“最后一个胜利”的jQuery-Ajax队列？

Question

假设我在页面上有三个元素：

• 接受数字联系人ID的文本框。
• 一个按钮，当单击该按钮时，将向服务器发出Ajax请求，以获取输入到文本框中的联系人ID的联系信息。
• 一个div，显示从服务器获取的联系信息。

现在再假设两件事：

• 预计从服务器往返需要5秒钟。
• 如果在5秒延迟期间，用户在文本框中输入了不同的数字，并单击该按钮，则网页应忽略第一个ajax结果并接受第二个结果（即最新的Ajax请求）。 / LI>

---

我的问题：

• 我怎么能像我所描述的那样实现“Last One Wins”jQuery-Ajax Queue？
  • 我会使用deferred objects或promise objects来帮我解决这个问题吗？

Answer 1

您只需在成功回调中处理所有内容。您在回调中检查的第一件事是输入新信息，如果是，则让新信息获胜。否则请查看请求的结果。

如果需要，应该很容易设置标志。每当发送新请求时都会悬挂该标志。在成功回调中使用它。

Answer 2

ResponsibleObject = {
  lastAjaxId: 0,
  onChangeSomething: function() {
    var ajaxObject = $.ajax({
       // some settings
       success:this.ajaxCallback
    });
    ajaxObject.__id = ++this.lastAjaxId;
  },
  ajaxCallback: function(data, textStatus, jqXHR) {
    if (jqXHR.__id != ResponsibleObject.lastAjaxId) {
        return false;
    }
    // put your code here
  }
};