在 for 循环中使用 setInterval答案

【问题标题】：Using setInterval in for loop在 for 循环中使用 setInterval
【发布时间】：2012-07-13 12:16:40
【问题描述】：

我目前在 AS3 中遇到了一个小问题。我想要实现的是在 for 循环中淡化图像。问题是循环没有等待 setInterval 函数完成。

for(var i in imageClips){
    setInterval(function(){
        fade(imageClips[i]);
    }, 6000);        
}

一旦调用 setInterval 函数，行为就很清楚了，循环继续。我现在的问题是，有没有办法让循环等待 setInterval 函数中发生的事情完成？

提前致谢，托马斯

【问题讨论】：

标签： actionscript-3 flash actionscript

【解决方案1】：

setInterval 不会延迟循环执行。你可以这样做：

function fadeImages(imageClips) {
  // Create a clone
  var imageStack:Array = imageClips.concat();

  // Create the callback that will fade all images
  var doFade:Function = function() {
    if (imageStack.length > 0) {
      fade(imageStack.shift());
      setInterval(doFade, 6000);
    }
  }

  // Start fading images
  doFade();
}

// Fade specified images
fadeImages(imageClips);

如果您想再次进行淡入淡出，只需再次使用该功能即可。

编辑：用函数包装了sn-p。

【讨论】：

最好使用Timer 而不是setInterval。
虽然这个解决方案工作得很好，但我想不出一种方法来无限次地重复褪色。我试图用我移动的元素来推动数组，但这不起作用。一次迭代工作正常，但之后图像开始褪色太快。你能再帮我一次吗？谢谢你:)

【解决方案2】：

如果您使用像 Greensocks 的 TweenMax 这样的库来为您的补间提供帮助，您的生活会轻松很多。它几乎是 Flash 中程序化动画的标准，并提供了数量惊人的功能，包括设置补间延迟的能力。

使用 TweenMax，您的代码将如下所示：

var delay:int = 6; // delay between fades in seconds
var duration:int = 1; // duration of fade in seconds

for (var i in imageClips) 
{
    TweenMax.to(imageClips[i], duration, { alpha: 0, delay: i * delay });  
}

【讨论】：

【解决方案3】：

您可以使用事件而不是等待动画结束。在每个动画结束时调度一个完整的事件（例如在影片剪辑的最后一帧）：

dispatchEvent(new Event(Event.COMPLETE));

然后为每个动画添加监听器：

var index:int = -1;

function fadeNext(event:Event = null):void {
    index += 1;
    if (index < imageClips.length) fade(imageClips[index]);
}

for (var i in imageClips) {
    imageClips[i].addEventListener(Event.COMPLETE, fadeNext, false, 0, true);
}

fadeNext();

这样您就可以更改动画的持续时间，而无需同步任何超时。

【讨论】：