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

Question

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

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

现在假设另外两件事：

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

---

我的问题：

• 我怎么能像我描述的那样实现“最后一个获胜”的 jQuery-Ajax 队列？
  • 我会使用延迟对象或承诺对象来帮助我解决这个问题吗？

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
  }
};