Action after a variable number of async events have complete
<p>I have a variable number of asynchronous events that I want execute. I want to be able to take some further action after they have ALL completed. 
The code snippet below shows my attempt at calling the events using the jquery deferred object.. Could anyone help? (I know the code won't run as is). bubble.transitionTo is the async event. The alert('complete'); is called before the async callbacks have been complete, in fact before they are executed. </p>

<pre><code>var events = [];
    for (var i = 0; i &lt; 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'); });
</code></pre>
