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

【问题标题】：How Can I Build a "Last One Wins" jQuery-Ajax Queue?如何构建“最后一个获胜”的 jQuery-Ajax 队列？
【发布时间】：2012-07-03 10:33:40
【问题描述】：

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

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

现在再假设两件事：

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

我的问题：

我怎样才能像我描述的那样实现“最后一个获胜”的 jQuery-Ajax 队列？
- 我可以使用deferred objects 或promise objects 来帮助我解决这个问题吗？

【问题讨论】：

您可以同步执行此操作，因为在某种意义上“最后一个获胜”是同步执行的正常状态。但是 async with Promise 更加灵活，您已经掌握了这一点。我从 Trevor Burnham 的新书中得到了很多关于实践中 promise 的优秀代码示例。它也可能对您有所帮助。

标签： jquery queue jquery-deferred promise

【解决方案1】：

您只需在成功回调中处理这一切。您在回调中检查的第一件事是是否输入了新信息，如果是，则让新信息获胜。否则按照请求的结果处理。

如有必要，应该很容易设置标志。每当发送新请求时就悬挂旗帜。在成功回调中使用它。

【讨论】：

【解决方案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
  }
};

【讨论】：