How to fix closure problem in ActionScript 3 (AS3)

Question

Hello,

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.

Answer 2

(function() {
  var imageData = imageList[i];
  imageData.loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function() {
    // use imageData;
  });
}).apply();

Answer 3

Using the more functional style forEach method on the Array class avoids this problem. This has been mentioned already but I'll expand on it here.

imageList.forEach( function ( item:MovieClip, index:int, list:Array) {
    // add your listener with closure here
})

Using this method, the function passed into the forEach defines a new scope each iteration. now you can add a closure inside this scope and it will remember each instance as you want.

On a related note:

Typing those 3 arguments the whole time is a pain so... You can also make that less / more ugly with an adaptor function:

// just give me the item please
imageList.forEach ( itrAdpt( function ( image: ImageData ) {
    // add your listener with closure here
}))

// give me the item and it's index
imageList.forEach ( itrAdpt( function ( image: ImageData, index:int ) {
    // add your listener with closure here
}))

// give me the item, index and total list length
imageList.forEach ( itrAdpt( function ( image: ImageData, index:int, length:int ) {
    // add your listener with closure here
}))

where itrAdpt is a (possibly global) function defined something like:

public function itrAdpt(f: Function): Function
{
    var argAmount:int = f.length

    if (argAmount == 0)
    {
        return function (element:*, index:int, colection:*):* {
            return f(element)
        }
    }
    else if (argAmount == 1)
    {
        return function (element:*, index:int, colection:*):* {
            return f(element)
        }
    }
    else if (argAmount == 2)
    {
        return function (element:*, index:int, colection:*):* {
            return f(element, index)
        }
    }
    else if (argAmount == 3)
    {
        return function (element:*, index:int, colection:*):* {
            return f(element, index, colection.length)
        }
    }
    else
    {
        throw new Error("Don't know what to do with "+argAmount+"arguments. Supplied function should have between 1-3 arguments")
    }
}