AJAX call in for loop won't return values to correct array positions

Posted by Heilemann on Stack Overflow See other posts from Stack Overflow or by Heilemann
Published on 2010-03-08T21:53:23Z Indexed on 2010/03/08 22:06 UTC
Read the original article Hit count: 513

Filed under:
|
|

I need to get a range of pages using AJAX and put them into an array, where their given place in the array is equal to the i of a for loop (it's a caching-like function for blog pages, and the range of the for loop is entirely variable). I'm doing something akin to the following:

var bongo = new Array();

for (i = 0; i < 10; i++) {

    jQuery.ajax({ type: "GET", url: http://localhost, data: queryString, success: function(request) { bongo[i] = request } })

}

The problem is, that unless I add async: false to the .ajax options (which would make it... SJAX?), which causes the requests to basically pause the browser, going against what I'm trying to do, the i in the success callback will always end up being 11, whereas I of course want it to pour the returned data into each slot of the array from 0 to 10.

I've tried replacing the line with this:

bongo[i] = jQuery.ajax({ type: "GET", url: http://localhost, data: queryString }).responseText

But that made no difference.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery