Timer events are clogged and triggered all at once in AS3

Question

Hey there

I've experience this problem in many forms.

public function startTimer() {
  timer = new Timer(3000);
  timer.addEventListener(TimerEvent.TIMER, timerTick, false, 0, true);
  timer.start();
}

private function timerTick(e:TimerEvent) {
  var bubble = new Bubble();
  this.addChild(bubble);
}

Bubble gets removed from the display after a certain amount of time. Imagine a water bubble in the floating up from the bottom of the screen, and getting removed when hitting the top.

If the flash window is left idle for around 20 minutes, then way too many Bubble objects are created and shown on the display. There should only be around 5 on the screen (because they get removed), but there are way too many.

I think for some reason the timer events get clogged and when we come back to the browser window, all triggered at once. This is using firefox on the mac, but also happens in other browsers.

I have tried many things, including rewriting the timers using flash.utils.getTimer() (ie using the system clock), and using a recursive TweenLite.delayedCall.

Thanks for any tips and pointers

Answer 1

I think you've run afoul of a new feature in Flash Player 10.1, where it throttles playback down to 2FPS when the content is completely invisible (i.e when the user switches tabs, or scrolls the content offscreen). An Adobe engineer explains this here.

So I'm guessing that that your bubbles move and remove themselves based on frame animations or events. So when this throttling occurs, they start moving much more slowly compared to the rate they are spawned. (Even with playback throttled, timer events work roughly the same - the chance for them to occur comes less frequently, but each event still occurs at the first opportunity once three seconds have passed since the last one.)

So any content that mixes together frame-based and time-based behaviors is going to behave differently in 10.1 when the user changes tabs, which is ultimately necessary to preserve performance and battery on devices. The best fix is to probably to change your timers to some sort of frame-based logic, along these lines:

public function startTimer() {
    frameCount = 0;
    addEventListener( Event.ENTER_FRAME, onFrame, false, 0, true);
}

private function onFrame(e:Event) {
    frameCount++;
    if (frameCount > waitTimeSeconds * publishedFPS) {
        frameCount = 0;
        timerTick();
    }
}

Granted, you could also change the bubbles to work entirely on timers, but that just means that when the content is on an invisible tab, every frame there will be a big stack of timer events to waste cycles processing.