Question

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.

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

where is this transitionTo function defined? I can’t find it in any of the jQuery project’s documentation. The likelyhood is that it doesn’t implement the $.Deferred methods.

If my assumption is correct you could try something like this.

 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'); });

This function returns a deferred object that resolves when the callbacks have been called for all your bubbles.