Question

I’d like to make many request to google app engine for blobs. This basic for loop method creates the right number of elements but they all point to the blob that was requested last.

for (key=0; key < keyList.length; key++){
    var keyUrl = '/serve_blob/audio/'+keyList[key];
    $.ajax({ url : keyUrl, type : 'GET', dataType : 'text',
        success : function(data, xhr, status) {
            renderTemp("#audioTable", "audioTemplate", {'audioSrc':keyUrl});
        }
    });
}

I can get a second request to work properly by calling it from the ajax complete callback. Is there a better way to get this to work for many requests?

Answer 1

This is the nature of a closure. When the code in the closure (eg, the code in your success function) executes, the value of keyUrl is whatever it was set to last – the value is not captured at the time the closure was defined.

To avoid this, put the ajax call inside a separate function, with keyUrl as a parameter, and call it from inside your loop.