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调用本身是异步的，但事件处理程序回调的执行并非如此。

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

请参阅browserscope的网络测试。

编辑2
哦，顺便说一下。您可能希望使用POST而不是GET来确保浏览器不会因缓存命中而取消请求。如果您绝对需要计算每次点击次数，则应在调用async时将false标记设置为new_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; });

AJAX请求不会被快速点击调用

1 个答案: