jQuery AJAX calls in for loop
The easiest way is to use a closure. Whenever you have something asynchronous in a loop, it is the same thing.
for (var i .....) {
asynchronousFunction(function() {
use(i);
}
}
In this pseudocode snippet, the inner function captures the storage location referenced by i
. The loop runs, the i
increments to its final value, and then the async callbacks start getting called, all of them looking up the exact same location (not value).
The general solution is this:
for (var i .....) {
(function (i) {
asynchronousFunction(function() {
use(i);
});
})(i);
}
i.e. wrap the whole contents of your loop in an self-executing function.
Here, the value of outer i
gets passed into the wrapping self-executing anonymous function; this unique value's location gets captured by the async callback. In this way, each async gets its own value, determined at the moment the self-executing function is invoked.
The links in the comment section of the question tells you what is wrong in your code... but you can have a better solution than the once explained there.
Try $.each() to iterate through the list(assuming it is an array), so that the callback passed will create a separate closure for each iteration
$.each(linkList, function (i, item) {
$.ajax({
url: item.getAttribute("href"),
cache: false
}).done(function (html) {
var hasAppended = false;
if (html.indexOf('someStringOnGottenPage') != -1 && !hasAppended) {
hasAppended = true;
var id = item.getAttribute("href").substring(item.getAttribute("href").indexOf('='));
$("#links a[href*='" + id + "']").append(' THIS PAGE CONTAINS SPECIFIED DATA');
}
});
})
If it is an jQuery object then use .each()
linkList.each(function (i, item) {
var $item = $(item),
href = $item.attr("href");
$.ajax({
url: href,
cache: false
}).done(function (html) {
var hasAppended = false;
if (html.indexOf('someStringOnGottenPage') != -1 && !hasAppended) {
hasAppended = true;
var id = href.substring(href.indexOf('='));
$("#links a[href*='" + id + "']").append(' THIS PAGE CONTAINS SPECIFIED DATA');
}
});
})