flash - How to fix closure problem in ActionScript 3 (AS3)

Question

In the code below I'm trying to load some images and put them in the stage as soon as they get individually loaded. But it is bugged since only the last image is displayed. I suspect it's a closure problem. How can I fix it? Isn't the behaviour of closures in AS3 the same as in Java Script ?

var imageList:Array = new Array();
imageList.push({'src':'image1.jpg'});
imageList.push({'src':'image2.jpg'});
var imagePanel:MovieClip = new MovieClip();
this.addChildAt(imagePanel, 0);

for (var i in imageList) {
    var imageData = imageList[i];
    imageData.loader = new Loader();

    imageData.loader.contentLoaderInfo.addEventListener(
        Event.COMPLETE, 
        function() {
            imagePanel.addChild(imageData.loader.content as Bitmap);
            trace('Completed: ' + imageData.src);             
        });

    trace('Starting: ' + imageData.src);
    imageData.loader.load(new URLRequest(imageData.src));   
}

Answer 1

Isn't the behaviour of closures in AS3 the same as in Java Script ?

Yes, JavaScript does exactly the same thing. As does Python. And others.

Although you define 'var imageData' inside the 'for', for loops do not introduce a new scope in these languages; in fact the variable imageData is bound in the containing scope (the outer function, or in this case it appears to be global scope). You can verify this by looking at imageData after the loop has completed executing, and finding the last element of imageList in it.

So there is only one imageData variable, not one for each iteration of the loop. When COMPLETE fires, it enters the closure and reads whatever value imageData has now, not at the time the function was defined(*). Typically the for-loop will have finished by the point COMPLETE fires and imageData will be holding that last element from the final iteration.

(* - there exist 'early-binding' languages that will evaluate the variable's value at the point you define a closure. But ActionScript is not one of them.)

Possible solutions tend to involve using an outer function to introduce a new scope. For example:

function makeCallback(imageData) { return function() {
    imagePanel.addChild(imageData.loader.content as Bitmap);
    trace('Completed: ' + imageData.src);                                                                                                     
} }
...
imageData.loader.contentLoaderInfo.addEventListener(Event.COMPLETE, makeCallback(imageData));

You /can/ put this inline, but the doubly-nested function() starts to get harder to read.

See also Function.bind() for a general-purpose partial function application feature you could use to achive this. It's likely to be part of future JavaScript/ActionScript versions, and can be added to the language through prototyping in the meantime.