Gerfried Gerfried - 1 month ago 11
Javascript Question

jQuery promise (variable number of promises)

I have a script that loads multiple SVG files and should then draw them. https://plnkr.co/edit/offqAzlaR1xqGrROQBTc

var s = Snap("#svg");
var bigCircle = s.circle(150, 150, 100);

// Helper to convert Snap.load() into a Promise.
function loadSVG(url) {
var deferred = new $.Deferred();
Snap.load(url, function(x) {
deferred.resolve( x );
});
return deferred.promise();
}

// Make an array of Promises.
var loadPromises = [
loadSVG('eu.svg'),
loadSVG('af.svg'),
loadSVG('am.svg'),
loadSVG('as.svg'),
];

// Wait for all the Promises to finish.
$.when( loadPromises ).done(function ( results ) {
console.log(results); //<-- seems to be a promise again!!!!
for (var i = 0; i < results.length; ++i) {
var svg = results[i];
// Your processing of each SVG goes here.
var g = svg.select("g");
s.append(g);
}
});


I don't get any errors, but the strange thing is, that my done() result seems to be a promise again (at least it looks like that in the console). The result of done() should be an array of SnapJs objects. What am I doing wrong?

Answer

You'll have to use apply to pass in an array of arguments to $.when

$.when.apply($, loadPromises).done(function () {
    var results = [].slice.call(arguments);

    ....
});

This then equals

$.when(loadPromises[0], loadPromises[1], loadPromises[2], etc)