1

用例：单击锚标记时，向服务器发送该项目已被单击的信息。在这里你可以找到这个小提琴：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++;
});​

​</p>

4

1 回答 1

1

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

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

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

查看browserscope的网络测试。

编辑 2
哦，顺便说一句。您可能想要使用POST而不是GET确保浏览器不会由于缓存命中而取消请求。如果你绝对需要让每次点击都计数，你应该在调用时将async标志设置为. 这样，所有请求都会排队并一个接一个地运行。falsenew_request.open

快速解决：

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;
});​
于 2012-11-30T10:30:17.393 回答