AS3 Is Giving A Delay / TimerEvent Issue?

Question

Hello from the past everybody. ;)

OK, Flash is dead, however I wanted to retry an old stuff just today.

My interval delay ticks for each (one) second.

Everything seems to be fine except that I have a delay problem between the time displayed on the debugger and my living room's clock.

Since the Timer call is:

new Timer(1000);

I don't understand how that some code may not be executed within such a long delay.

Here is some minimum testable code.
You may copy/paste the code provided on frame 1 to test the issue.
Stage is 1024 * 400 (works with 550 * 400 too).

The meaning of this is to build a chess clock application for my pleasure only (So why not AS3 for this purpose?).

Any advice please? Best regards and thank You in advance!!!

import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormatAlign;
import flash.text.TextField;
import flash.display.Stage;
import flash.display.Sprite;
import flash.display.Graphics;

var container1:Sprite = new Sprite();
var container2:Sprite = new Sprite();
var margin1:uint = 20
var display1: TextField = new TextField();
var tFormat:TextFormat = new TextFormat();

////////////////  2 TEST !!! (970)   ////////
var timer:Timer = new Timer(1000);

var time:uint = 0;
var seconds:String;
var minutes:String;
var hours:String;
var date = new Date();


dateInit();
display1Init();

//timer.addEventListener(TimerEvent.TIMER_COMPLETE,changeDate);

timer.addEventListener(TimerEvent.TIMER,changeDate);
timer.start();

function dateInit()
{
    date.hours = date.minutes = date.seconds = date.milliseconds = 0;
    
    trace(date);
    createContainer(container1);
    createContainer(container2)
}

function createContainer(aSprite:Sprite) { addChild(aSprite); }

function display1Init()
{
    container1.addChild(display1);
    drawContainer1();
    drawContainer2();
    display1.width = 140;
    display1.height = 80;
    display1.background = true;
    display1.x = container1.width/2+ margin1/2 - display1.width/2 ;
    display1.y = 100;
    //display1.autoSize = TextFieldAutoSize.CENTER;
    //tFormat.align = TextFormatAlign.CENTER;
    tFormat.size = 26;
    tFormat.leftMargin = 35;
    tFormat.rightMargin = 35;
    tFormat.bold = true
    display1.border = true;
    display1.text=("\n" + date.hours + "." + "00" + "." + "00" + "\n\n");
    display1.setTextFormat(tFormat);
}

function drawContainer1():void
{
    var g:Graphics = container1.graphics
    g.lineStyle(1,0x000000);
    g.beginFill(0x996666)
    g.drawRoundRect(margin1,margin1,(stage.stageWidth/2)-margin1*2,(stage.stageHeight)-margin1*2,30,30);
    g.endFill();
}

function drawContainer2():void
{
    var g:Graphics = container2.graphics
    g.lineStyle(1,0x000000);
    g.beginFill(0x996666)
    g.drawRoundRect(container1.width+margin1,margin1,container1.width,(stage.stageHeight)-margin1*2,30,30);
    g.endFill();
}

////////////////////// UPDATE ////////////

function formatDate():void
{
    if(date.seconds<10){ seconds = "0"+date.seconds }
    else{ seconds = date.seconds}
    
    if(date.minutes<10){ minutes = "0"+date.minutes }
    else{ minutes = date.minutes }
}

function changeDate(e:TimerEvent):void
{
    date.seconds = timer.currentCount;
    formatDate();
    display1.text=("\n" + date.hours + "." + minutes + "." + seconds + "\n\n");
    display1.setTextFormat(tFormat);
    
    e.updateAfterEvent();
    
    if (timer.currentCount>59)
    {
        date.seconds = 0;
        //timer.stop();
        timer.reset();
        timer.start();
    }
    
    e.updateAfterEvent();
}

Answer 1

Something like that.

package
{
    public class PreciseTimer
    {
        private var start:Date;
        
        public function PreciseTimer()
        {
            reset();
        }
        
        // Resets the precise timer.
        public function reset():void
        {
            start = new Date;
        }
        
        // Returns the difference between instantiation/reset
        // and the present moment — in milliseconds.
        public function getTimer():int
        {
            return (new Date).valueOf() - start.valueOf();
        }
    }
}

Then, the usage:

import PreciseTimer;

var PT = new PreciseTimer;

// ...

// At any given moment:
trace(PT.getTimer(), "milliseconds passed.");

Now you are free to convert and display the obtained value in any way you want.