Flex Timer example ... Timer goes negative

Question

I tried this flex example from blog.flexexamples.com. This is a basic timer example.

But when timer crosses 30 min mark, it restarts automatically and starts showing negative time value(-1,-2 ..).

What is the problem ? Why it is showing negative value of timer, after it crosses 30 min mark ?

TimerDemo.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/14/creating-a-simple-timer-in-flex-with-the-flashutilstimer-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical"
                verticalAlign="middle"
                backgroundColor="white"
                creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import flash.utils.Timer;
            import flash.events.TimerEvent;

            private const MIN_MASK:String = "00";
            private const SEC_MASK:String = "00";
            private const MS_MASK:String = "000";
            private const TIMER_INTERVAL:Number = 10;

            private var baseTimer:int;

            private var t:Timer;

            private function init():void {
                t = new Timer(TIMER_INTERVAL);
                t.addEventListener(TimerEvent.TIMER, updateTimer);
            }

            private function updateTimer(evt:TimerEvent):void {
                var d:Date = new Date(getTimer()-baseTimer);
                var min:String = (MIN_MASK + (d.minutes - 30.0)).toString();
                var sec:String = (SEC_MASK  + d.seconds).toString();
                var ms:String = (MS_MASK + d.milliseconds).toString();
                counter.text = String(min+":"+sec+"."+ms);
            }

            private function startTimer():void {
                baseTimer = getTimer();
                t.start();
            }

            private function stopTimer():void {
                t.stop();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Start timer" click="startTimer()" />
        <mx:Button label="Stop timer" click="stopTimer()" />
    </mx:ApplicationControlBar>

    <mx:Label id="counter" fontSize="96" />

</mx:Application>

Answer 1

I'm not really sure what you're trying to do but I think I know what your problem is. By subtracting 30 of the min var, you only manipulate your output. So the actual timer is still counting the real minutes.

If you want to subtract 30 minutes from your Timer you should do it when instantiating d:Date like so:

const TIME_OFFSET:int = 1800000; //milliseconds in 30 minutes (1000*60*30)

var d:Date = new Date(getTimer()-baseTimer-TIME_OFFSET);

Remember to also remove the -30 for your var min:String

I hope this is what you're looking for.

EDIT

Given your comment about your getTimer() and baseTimer having a lot of difference, you should have a look at the getTimer() references. It states the following:

Returns int — The number of milliseconds since the runtime was initialized (while processing ActionScript 2.0), or since the virtual machine started (while processing ActionScript 3.0). If the runtime starts playing one SWF file, and another SWF file is loaded later, the return value is relative to when the first SWF file was loaded.

When I trace baseTimer and getTimer() within the startTimer() function they are always (more or less) the same. So it seems there is something off in your case.

A workaround can be using new Date().time class instead of getTimer() like so:

private function updateTimer(evt:TimerEvent):void {

    var d:Date = new Date(new Date().time - baseTimer);
    var min:String = (MIN_MASK + d.minutes).substr(-MIN_MASK.length);
    var sec:String = (SEC_MASK + d.seconds).substr(-SEC_MASK.length);
    var ms:String = (MS_MASK + d.milliseconds).substr(-MS_MASK.length);
    counter.text = String(min + ":" + sec + "." + ms);
}

private function startTimer():void {

    baseTimer = new Date().time;

    t.start();
}

More info on that can be found in the reference