处理并发的Ajax请求 [英] Dealing with concurrent Ajax requests
问题描述
我正在尝试执行以下操作:
I'm trying to do the following:
- 我有一个链接列表，每个链接在单击时都会执行不同的Ajax调用.
- 为每个Ajax响应分配了一个显示目标.
- 正在处理请求时，仍然可以单击链接(=进一步的Ajax调用).
- 下面的示例有两个目标和四个链接:两个指向DIV#d1，两个指向DIV#d2.
如何确保只有对最后发送的请求的响应最终会显示在其目标DIV中?
How can I make sure that only the response to the last request sent will eventually be displayed in its target DIV ?
如果我单击标记为Data1的链接，然后单击Data2，则必须中止第一个呼叫，因为Response1可能在Response2之后到达.问题似乎暗示我必须跟踪每个目标的先前请求，因此，每当发出新请求时，我都可以中止它们.
If I click on the link labelled Data1, then Data2, the first call must be aborted because Response1 could arrive after Response2. The problem seems to imply that I must keep track of previous requests for each target, so I can abort them whenever a new request is made.
我已经编写了这段代码.我想知道您是否认为这是正确的方法.
I've written this piece of code. I'd like to know if you think this is the approach is right.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<ul>
<li><a href="data1.htm" class="trigger" data-target="d1">Data 1</a></li>
<li><a href="data2.htm" class="trigger" data-target="d1">Data 2</a></li>
<li><a href="data3.htm" class="trigger" data-target="d2">Data 3</a></li>
<li><a href="data4.htm" class="trigger" data-target="d2">Data 4</a></li>
</ul>
<div id="d1"></div>
<div id="d2"></div>
<script type="text/javascript" src="/test/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
var register = {};
$(".trigger").on("click", function() {
var target = $(this).attr("data-target");
var url = $(this).attr("href");
if (register[target] == undefined) register[target] = [];
ajaxCall = $.get(url, function(data) { // Ajax request
$("#" + target).html(data);
});
for (a in register[target]) { // Aborts existing ajax requests for this target
register[target][a].abort();
}
register[target] = []; // Empty register for this target
register[target].push(ajaxCall); // Register current ajax request
return false;
});
});
</script>
</body>
</html>
推荐答案
您的想法正确.但是，不应使用for in遍历数组.另外，您可能想先中止所有呼叫(请确保).
Your idea is right in my view. However, you should not use for in to loop over an array. Also you might want to abort all calls first (just to be sure).
实际上，您正在清除每个请求的数组，并且只用一个ajax调用填充它.在这种情况下，没有必要遍历数组，因为如果数组不为空，则您将知道它仅包含一个元素.另一方面，您不知道它将包含零个元素还是一个元素，因此循环是中止调用(如果存在)的最简洁方法.
Actually, you're clearing the array each request and only fill it with one ajax call. In this case, it is not necessary to loop over the array, since you know it will only contain one element if the array is not empty. On the other hand, you don't know whether it will contain zero or one element, so a loop is the most concise way to abort a call if it is present.
此外，您可以使用.data获取data-属性.
Also, you can use .data to get data- attributes.
最后，您可以利用||技巧.
Lastly, you could make use of the || trick.
var target = $(this).data("target"),
url = $(this).attr("href");
register[target] = register[target] || [];
$.each(register[target], function() {
this.abort();
});
ajaxCall = $.get(url, function(data) { // Ajax request
$("#" + target).html(data);
});
register[target].push(ajaxCall); // Register current ajax request
这篇关于处理并发的Ajax请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
