AJAX请求在快速点击时未被调用

Question

用例：当一个锚标记被点击时，将该项目被点击的信息发送到服务器。在这里你可以找到这把小提琴：http://jsfiddle.net/nXYQP/5/

现在，当我快速点击锚标记时，我可以看到处理程序被调用的次数等于我点击的次数。但是从处理程序发送的AJAX请求的数量要少得多。

使用Chrome开发工具检查发送的请求数。按F12打开开发人员工具，导航到"网络"选项卡，然后单击锚点标记查看它发送的请求数。

我无法解释这种行为。请在上面放些灯。

这是我的代码：

<a id="inc" href="http://www.google.com"> Click me </a>
<div id="container"> Click count will be updated here </div>

Javascript代码：

var text = "Click no:-";
var counter = 0;
$("#inc").click(function() {
var new_request = new XMLHttpRequest();                      
var new_serverURL = "http://www.google.com";
new_request.open('GET',new_serverURL,true);
new_request.send(null);
$("#container").html("<p>" + text + " " + counter + "</p>");
counter++;
});​

​

Answer 1

我敢打赌，取消的XMLHttpRequests是离开(iframe的)当前页面的结果。

由于不阻止click事件触发其默认行为(即获取引用的文档)，因此一旦当前页面卸载，所有排队的事件处理程序回调都将被取消(请记住，尽管AJAX调用本身是异步的，但事件处理程序回叫的执行不是异步的)。

EDIT
实际上，对单个域的同时请求数量是有限制的。这个限制是由浏览器强加的，并且变化很大(2和6是最常见的)。

请从browserscope查看网络测试。

EDIT 2
哦，顺便说一句，您可能希望使用POST而不是GET，以确保浏览器不会因为缓存命中而取消请求。如果您绝对需要让每次点击都有意义，那么在调用new_request.open时应该将async标志设置为false。通过这种方式，所有请求都将排队并一个接一个地运行。

快速修复：

var text = "Click no:-";
var counter = 0;
$("#inc").click(function() {
var new_request = new XMLHttpRequest();
var new_serverURL = "http://www.google.com";
new_request.open('POST',new_serverURL,true);
new_request.send(null);
$("#container").html("<p>" + text + " " + ++counter + "</p>");
// Prevent the link's default behavior
return false;
});​