AS3: Stalling a for loop at each pass - actionscript-3

Question

So I've worked out a great way to create a pixelized wipe effect, with movie clips of pixels nested in rows. I've created a loop that goes through each row, and then another loop inside that loop for the pixels in each row. I then use a random number between 1-0 for for the delay before it alpha-ups the pixel. I used Greensock for the tween and it works great.
One problem, I can't stall the for loop for the rows, and every row comes up at once. Still, the pixels are staggered, and this is a nice effect, but I want it to move from left to right. So my code looks like this: (BTW, yes, AS3 does have setTimeout and it works fine)
function stripeWipeUp(stripe:MovieClip):void {
var total = stripe.numChildren;
for (var i:int = 0; i<total; i++) { // the rows
trace(i);
setTimeout(function() {
trace("setTimeout: "+i);
var row:MovieClip = stripe.getChildAt(i) as MovieClip;
var pixTotal = row.numChildren;
for (var j:int = 0; j<pixTotal; j++) { the pixels
var pix:MovieClip = row.getChildAt(j) as MovieClip;
var num = Math.floor(Math.random()*100)/100; // the delay
pixUp(pix, num); // my greensock function
}
}, 500);
}
}
What happens, with the setTimeout in there, is that the "i" for loop hits every row (there are 27) before one setTimeout gets finished. So, it doesn't work as it should - the next loop should not execute until the setTimeout is finished. Any idea how to accomplish this so each row gets stalled by about 500 ms? Thanks.

Answer 1

Your problem is with this.
trace("setTimeout: "+i);
"i" is not what you think it is.
The scope of "i" is in stripeWipeUp not the anonymous function.
With that being said "i" is always the value of the last itteration of the loop that was run across all of your anonymous functions.
So as you can see when the anon functions trigger "i" will most-likely be equal to "total".
This is why we avoid using anonymous functions as scope is very hard determine.
Create an array and store a custom class in it for each "pixel" that will control what you want to do.
In this class use a Timer Object not setTimeOut. setTimeOut is a garbage function left over from AS2.

Answer 2

drop the setTimeout and just add a delay multiplied with i
var num = ( i * 500 ) + Math.floor(Math.random()*100)/100; // the delay

Answer 3

I would encapsulate i and j, a Timer, and an event handler for the Timer, into a class. In the event handler I would:
Do your effect for the pixel corresponding to j and i
Update j (and i)
If there are more pixels, schedule the next event

Answer 4

I was able to get it to work by taking the inner part out and making it a separate function. I would prefer a much cleaner solution like Creynders', but for some reason that didn't work. Here is the code:
// the row of pixels
function row(stripe:MovieClip, i:int, up:Boolean, del:Number):void {
setTimeout(function() {
var row:MovieClip = stripe.getChildAt(i) as MovieClip;
var pixTotal = row.numChildren;
for (var j:int = 0; j<pixTotal; j++) {
var pix:MovieClip = row.getChildAt(j) as MovieClip;
var num = Math.floor(Math.random()*100)/100;
(up) ? pixUp(pix, num) : pixDown(pix, num);
}
}, del);
}
// the rows in the "stripe"
function stripeWipe(stripe:MovieClip, up:Boolean):void {
var total = stripe.numChildren;
var del:Number = 0;
for (var i:int = 0; i<total; i++) {
row(stripe, i, up, del);
del = del+100;
}
}