views:

1978

answers:

4

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)); 
}
+15  A: 

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.

bobince
Thanks for clearing things up. So in fact the behaviour is different from Java Script, since Java Script is a 'early-binding' language, which in my opinion is better. Why one would prefer the AS3 behaviour?
fromvega
No, ActionScript and JavaScript behave the same - they have to, as they are both compliant with the ECMAScript standard. Neither are early-binding languages, which tend to pop up more in functional programming. I would love to see an early-binding language based around a modern script language.
bobince
You are right! I run some tests and in fact the behaviour is the same. I guess I thought it was different because I never run into a situation with this kind of delay in Javascript. Thanks!
fromvega
Does JQuery change this behaviour somehow? I use it a lot maybe it was confusing me.
fromvega
Not inherently, no, but jQuery's sequence.Each() calls a function on each iteration, rebinding the function variable each time. So it avoids the problem that for/while loops can suffer.
bobince
Finally! Someone who explains this concept clearly.Thanks!
helloworlder
A: 
(function() {
  var imageData = imageList[i];
  imageData.loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function() {
    // use imageData;
  });
}).apply();
A: 

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")
    }
}
Brian Heylin