并发jQuery ajax请求中的重复数据

Question

I'm fetching data from a table of links on a webpage. As I iterate through the table, I kick off a bunch of ajax requests, increment a counter, then checkFinished() when I get to the end to see if they're all done.

In the mean time, my ajax requests start finishing - all the urls are different and lead to different content, but the data I print out will often be the same! Not all identical, but across 30 requests there might be 6 unique data fetched.

for (var i = 0; i < max; ++i) {
    //...getting the link
    href = a.attr("href")
    console.log("Fetching"+a.innerText);
    $.ajax({
        url:href
    }).done(function(data){
        console.log(href, data); //the data doesn't match the href page!
    })
}

I can see that href is different for each call, but data is the same as described.

Crucially, it works perfectly if I add async: false to the $.ajax call, so something is up with the ajax call. I've tried messing with other ajax settings with no luck.

Any ideas?

Answer 1

Edit, updated

Try

var max = 5;
$("a").slice(0, max).each(function(k, v) {
  console.log("Fetching" + $(v).text());
  $.ajax($(v).attr("href"))
  .done(function(data) {
    console.log(data);
  })
})