jQuery ajax请求被取消会减慢当前请求

Question

我正在使用一个工具来检索jQuery事件keypress中数据库中的地址。当文本输入失去焦点时，我取消每个挂起的请求，以避免在用户完成输入后出现下拉菜单。一切都可以正常工作，但是最后我发送了一个最终的ajax请求来进行我的表单的下一步。这个请求比之前取消所有这些请求要慢得多。我不明白为什么，取消的请求不应该影响待处理的请求（我确定它们已经被取消，在chrome工具中的网络选项卡中查看）。我使用的是这段代码：

jQuery.xhrPool = [];
jQuery.xhrPool.abortAll = function() {
    jQuery(this).each(function(idx, jqXHR) {
        jqXHR.abort();
        jQuery('.loader').hide();
    });
};

jQuery.ajaxSetup({
    beforeSend: function(jqXHR) {
        jQuery.xhrPool.push(jqXHR);
    },
    complete: function(jqXHR) {
        var index = jQuery.xhrPool.indexOf(jqXHR);
        if (index > -1) {
            jQuery.xhrPool.splice(index, 1);
        }
    }
});

jQuery('#my_input').blur(function(){
    jQuery.xhrPool.abortAll();
});

我猜有一种优化技巧我不理解。

感谢您的帮助。

- M4nch4k

---

如果您没有取消它们，延迟仍然存在吗？ - Kevin B

它比我取消它们时要慢得多。 - M4nch4k

如果您在不发送任何要取消的先前请求的情况下发送该请求，会怎样呢？我怀疑被取消的请求与您遇到问题的请求花费的时间无关。 - Kevin B

还有……你发送的ajax请求是在每次按键时自动完成还是搜索框？如果是的话，那么非常低效。你应该只在检测到用户停止输入时使用简单的节流器发送请求。最初你可能会认为这会导致延迟，但最终整体性能会得到改善，因为你只会发送2-3个请求，而不是10-30个（每个字符一个请求）。 - Kevin B

@M4nch4k，关于这个问题你有什么反馈吗？ - jpmorin

Answer 1

请记住，打开一个AJAX请求到服务器，然后取消请求并不会取消服务器上的请求处理，它只是停止浏览器监听响应。服务器将继续处理任何未连接的ajax请求，直到它们完成运行，此时它尝试向客户端发送响应并发现没有人在监听，因此自动中止。

- Mark

---

这是一个很好的观点，如果服务器端语言处理会话类似于php的方式，那么就会出现这种情况。 - Kevin B

还忘了提一下，浏览器对 AJAX 请求的限制可能意味着如果您发出四个请求并且最后一个请求是第五个，则根据浏览器的限制，第五个请求将一直挂起，直到另外四个请求中的一个完成。 - Mark

Answer 2

jQuery('#my_input').focusout(function(){   
    jQuery.xhrPool.abortAll();
});      

blur事件支持检测父元素失去焦点的情况。

blur vs focusout -- 有什么真正的区别吗？

- Babu