Пускане на асинхронни ajax рекуести към масив от url-и и обработването им наведнъж

Днес имах много интересен случай, в който трябваше да вземем няколко SVG файлове с ajax и после да ги обработим наведнъж когато всички рекуести са готови.

Знам за $.when но съм го използвал само когато броя на рекуестите са фиксиран брой.

Нещо като това тук:

$.when( $.ajax( 'first.svg' ), $.ajax( 'second.svg' ) ).done( function( ajax1, ajax2 ) {
    // do stuff with both things.. as ajax1[0] is the svg document
    // for the first.svg and ajax2[0] is the svg document for the 
    // second.svg
});

Ясно е, че ще ползваме нещо сходно и за това слагаме всеки от ajax извикванията в масив, че да можем да ги добавяме динамично.

// svgUrlArray is an existing array with all the urls of the svgs

// we create a new array with all the ajax calls
var svgAjaxArray = [];

for( var svgIndex = 0; svgIndex < svgUrlArray.length; svgIndex++ ) {
    svgAjaxArray.push( $.ajax( svgUrlArray[ svgIndex ] ) );
}

След това подаваме масива на $.when

$.when( svgAjaxArray ).done( function() {
    // this is executed a bit too early 
});

И хендлъра на done събитието е извикан прекалено рано. Защо?

Защото Array не е Deffered обект – той е просто масив и стойността му е готова за използване веднага (точно като Deffered обект, който се resolve-а веднага при създаването си). И за това done callback-а се извиква веднага.

И какво ни е най-лесното решение тогава?

$.when.apply( $, svgAjaxArray ).done( function() {
    // Now we're talking ;)
    // You must use the arguments variable to get all the entries
    // because you don't know what is the length of the ajaxArray
});

Вече може да обработваме произволен брой от асинхронни заявки и да ги обработваме след като всички са приключили. Array!