jQuery承诺(可变数量的承诺)

时间:2016-10-14 20:49:34

标签: javascript jquery asynchronous promise

我有一个加载多个SVG文件的脚本,然后应该绘制它们。 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);
    }    
  });

我没有得到任何错误,但奇怪的是,我的done()结果似乎再次成为一个承诺(至少它在控制台中看起来像那样)。 done()的结果应该是一个SnapJs对象的数组。我做错了什么?

1 个答案:

答案 0 :(得分:7)

您必须使用apply将一系列参数传递给$.when

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

    ....
});

然后等于

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