用例:当单击 anchor 标记时,向服务器发送该项目已被单击的信息。在这里您可以找到这个 fiddle :http://jsfiddle.net/nXYQP/5/
现在,当我快速单击 anchor 标记时,我可以看到处理程序的调用次数等于我单击的次数。但从处理程序发送的 AJAX 请求数量却少得多。
使用 Chrome 开发者工具检查发送的请求数。 按 F12 打开开发者工具并导航到“网络”选项卡,然后单击 anchor 标记以查看其发送的请求数。
我无法解释这种行为。请给它加一些光。
这是我的代码:
<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++;
});
最佳答案
我敢打赌,被取消的 XMLHttpRequests
是离开(iframe 的)当前页面的结果。
由于您没有阻止 click
事件触发其默认行为(即获取引用的文档),一旦当前事件发生,所有排队的事件处理程序回调都将被取消页面卸载(请记住,虽然 AJAX 调用本身是异步的,但事件处理程序回调的执行却不是)。
编辑
实际上,对单个域的同时请求数量是有限制的。此限制是由浏览器施加的,并且变化很大(2 和 6 是最常见的)。
参见 browserscope 的网络测试.
编辑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;
});
关于javascript - 快速点击时未调用 AJAX 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13642968/