可變數量的異步事件完成後的操作

Question

我想要執行的可變數量的異步事件。我希望能夠在所有完成後採取進一步行動。 下面的代碼片段顯示了我使用jQuery延期對象調用事件的嘗試..任何人都可以幫忙嗎？ （我知道代碼不會按原樣運行）。 bubble.transitionTo是異步事件。警報（'完成'）;在異步回調完成之前調用，事實上在執行之前。

var events = []; 
    for (var i = 0; i < stageBubbles.length; i++) { 
     var element = stageBubbles[i]; 
     var bubble = new Object(); 
     bubble = this.dataPointLayer.get('#' + element.name)[0]; 
     bubble.setOpacity(0.5); 
     events.push(bubble.transitionTo({ 
      x: element.x, 
      y: element.y, 
      radius: element.radius, 
      duration: 3, 
      easing: 'ease-in', 
      callback: function() { 

      } 
     })); 
    } 
    $.when.apply(this, events).done(function() { alert('complete'); }); 

Answer 1

這是transitionTo函數的定義嗎？我無法在任何jQuery項目的文檔中找到它。可能性是它沒有實現$ .Deferred方法。

如果我的假設是正確的，你可以嘗試這樣的事情。

showBubbles = function (stageBubbles) { 
     var events = [], 
      deferred = $.Deferred(), 
      completedCount = 0; 

     for (var i = 0; i < stageBubbles.length; i++) { 
      var element = stageBubbles[i]; 
      var bubble = new Object(); 
      bubble = this.dataPointLayer.get('#' + element.name)[0]; 
      bubble.setOpacity(0.5); 
      bubble.transitionTo({ 
       x: element.x, 
       y: element.y, 
       radius: element.radius, 
       duration: 3, 
       easing: 'ease-in', 
       callback: function() { 
        completedCount += 1; 
        if (completedCount == stageBubbles.length) { 
         deferred.resolve(); 
        } 
       } 
      }); 
     } 
     return deferred.promise(); 
    }; 
    $.when(showBubbles.call(this, stageBubbles)).done(function() { alert('complete'); }); 

該函數返回時解析回調已呼籲所有的泡沫延期對象。