How do you create a more accurate timer in OpenLaszlo than the lz.Timer class that can pause and loop?

Question

The lz.Timer class in OpenLaszlo can sometimes fire up to 256ms late, how do you create one that fires more accurately?

Answer 1

The following OpenLaszlo timer class I designed will fire more accurately and also has a nice looping feature with pause and reset for ease of use. This code works in OpenLaszlo 4.9.0 SWF10 and DHTML run-times:

<library>

  <!---
  Class: <loopingtimer>
  Extends: <node>

  This class is a looping timer that can be used to call a method to peform
  an action repeatedly after a specified number of milliseconds.

  Override the abstract method reactToTimeChange(theTime) to do something
  useful in your application, theTime will be the time elapsed since the
  timer's last firing, it will be close to the 'timer_resolution' set but
  will be off from about 47ms-78ms in FireFox 2 and 47ms-94ms in IE6
  (see note below for explanation).

  NOTE:

  This class originally used the LzTimer class but it was firing up to 256ms
  late, so this has been replaced with a setTimeout() method and embedded
  JavaScript which is more accurate, but still fires about 59ms late on
  average.

  For this reason the firing times of this class are approximate but will
  probably fire 47ms to 78ms (about 59ms) on average late. As a workaround
  for this problem the timer uses the system time to calculate how much time
  has actually elapsed since the last timer firing and passes the actual time
  elapsed ('theTime') in milliseconds to the abstract 'reactToTimeChange()'
  method.

  -->
  <class name="loopingtimer" extends="node">

    <switch>
      <when property="$as3">
        <passthrough>
          import flash.utils.setTimeout;
        </passthrough>
      </when>
    </switch>

    <!-- *** ATTRIBUTES *** -->

    <!-- Public Attributes -->

    <!---
    @param numnber timer_resolution: number of milliseconds between timer
    firings (default: 40ms)

    Note: OpenLaszlo seems to typically have a lower limit of 47-78
    milliseconds between firings, so setting below this may be useless.
    -->
    <attribute name="timer_resolution" type="number" value="40" />

    <!-- Private Attributes -->

    <!--- @keywords private -->
    <!---
    @param number formertime: used internally to calculate the number of
    elapsed milliseconds since playback was started
    -->
    <attribute name="formertime" type="number" value="0" />

    <!--- @keywords private -->
    <!---
    Used internally for tracking virtual current time in milliseconds
    for pause functionality.
    -->
    <attribute name="currenttime" type="number" value="0" />

    <!--- @keywords private -->
    <!--- @param string timer_state: 'PAUSED' | 'COUNTING' -->
    <attribute name="timer_state" type="string" value="PAUSED" />


    <!-- *** METHODS *** -->


    <!-- Public Methods -->


    <!--- @keywords abstract -->
    <!---
    ABSTRACT METHOD: overwrite to do something useful in your program

    @param number theTime: the time in milliseconds elapsed since playback
    was  started
    -->
    <method name="reactToTimeChange" args="theTime">
      if ($debug){
        Debug.write('WARNING: reactToTimeChange(): This is an abstract method that should be overridden to do something useful in your application');
        Debug.write('reactToTimeChange(): Time elapsed since last firing in milliseconds: '+theTime);
      }
    </method>

    <!--- Start Timer (Note: This will reset timer to 0) -->
    <method name="startTimer">
      this.setAttribute('timer_state', 'COUNTING');
      var now = new Date();
      var rawTime = now.getTime();
      this.setAttribute('formertime', rawTime);

      this.doForTime();
    </method>

    <!--- Pauses timer at current time -->
    <method name="pauseTimer">
      this.setAttribute('timer_state', 'PAUSED');
    </method>

    <!--- Resumes timer from time it is paused at -->
    <method name="unpauseTimer">
      this.setAttribute('timer_state', 'COUNTING');
      var now = new Date();
      var rawTime = now.getTime();
      this.setAttribute('formertime', rawTime-this.currenttime);
      this.repeat();
    </method>

    <!--- Stop Timer - stops timer and resets to 0  -->
    <method name="stopTimer">
      this.pauseTimer();
      this.resetTimer();
    </method>

    <!--- Resets Timer to 0 -->
    <method name="resetTimer">
      this.setAttribute('formertime', 0);
      this.setAttribute('currenttime', 0);
    </method>

    <!---
    Seeks to the given time in milliseconds.

    @param number(int) iTimeMs: the time to seek to
    -->
    <method name="seekToTime" args="iTimeMs">
      this.setAttribute('currenttime', Math.floor(iTimeMs));
    </method>

    <!-- Private Methods -->


    <!--- @keywords private -->
    <!---
    Called Internally By Timer

    @param number theTime: the actual time in milliseconds that has passed
    since the last timer firing (will usually be 16-100ms more than timer
    firing interval)
    -->
    <method name="doForTime">

      // Prevent Timer Incrementing When Paused
      if (this.timer_state == 'PAUSED')
        return;

      var now = new Date();

      var rawTime = now.getTime();

      if (this.formertime != 0)
        var currentTime = rawTime - this.formertime;

      this.setAttribute('currenttime', currentTime);

      // Call Abstract Method:
      this.reactToTimeChange(currentTime);

      this.repeat();

    </method>

    <!--- @keywords private -->
    <!---
    Used internally for timer looping.
    -->
    <method name="repeat">

      // This function uses an embedded JavaScript function which
      // can be called via the standard JavaScript setTimeout()
      // method which results in more accurate timer firing then the
      // standard OpenLaszlo LzTimer() class. LzTimer() fired up to
      // 256ms late, while setTimeout() usually fires from
      // only 47ms-78ms

      var f = function(){
        doForTime();
      }

      setTimeout(f, this.timer_resolution);
    </method>

  </class>

</library>