AS3: Запирание цикла for на каждом проходе

Question

Итак, я разработал отличный способ создания эффекта пиксельной очистки, с клипами с пикселями, вложенными в строки. Я создал цикл, который проходит через каждую строку, а затем еще один цикл внутри этого цикла для пикселей в каждой строке. Затем я использую случайное число между 1-0 для задержки до того, как он будет обрабатывать пиксель. Я использовал Greensock для анимации и отлично работает.

Одна из проблем, я не могу остановить цикл for для строк, и каждая строка появляется сразу. Тем не менее, пиксели расположены в шахматном порядке, и это хороший эффект, но я хочу, чтобы он перемещался слева направо. Так что мой код выглядит следующим образом: (Кстати, да, AS3 действительно есть SetTimeout и он работает отлично)

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

Что происходит с SetTimeout в там, что «я» цикл хитов каждую строку (там 27) до завершения одного набораTimeout. Таким образом, он не работает так, как должен - следующий цикл не должен выполняться до завершения setTimeout. Любая идея, как это сделать, чтобы каждая строка застопорилась примерно на 500 мс? Благодарю.

Answer 1

Мне удалось заставить его работать, взяв внутреннюю часть и сделав ее отдельной функцией. Я бы предпочел гораздо более чистое решение, такое как Creynders ', но по какой-то причине это не сработало. Вот код:

// 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; 

} 

} 

Answer 2

падение SetTimeout и просто добавить задержку умножаются я

var num = (i * 500) + Math.floor(Math.random()*100)/100; // the delay 

Answer 3

Ваша проблема с этим.

trace("setTimeout: "+i); 

«Я» не так, как вы думаете.
Объем «i» находится в stripeWipeUp, а не анонимная функция.
С учетом того, что «i» всегда является значением последней итерации цикла, который выполнялся во всех ваших анонимных функциях.
Так как вы можете видеть, когда функция запуска анонов «i», скорее всего, будет равна «total».

Вот почему мы избегаем использования анонимных функций, поскольку область действия очень сложна.

Создайте массив и сохраните в нем собственный класс для каждого «пикселя», который будет контролировать то, что вы хотите сделать.
В этом классе используйте объект таймера, а не setTimeOut.
setTimeOut - функция обработки мусора, оставшаяся от AS2.

Answer 4

Я бы инкапсулировал i и j, таймер и обработчик событий для таймера в класс. В обработчик событий, я бы:

• ли ваш эффект для пикселя, соответствующего J и я
• Update J (и я)
• Если есть больше пикселей, график следующего события