Inside Technique : Time Master : Timeline Code

In this section we explain how the Timeline object was built by providing detailed comments on the code:

  // Timeline Object
  // Copyright 1998 InsideDHTML.com, LLC. All rights reserved
  // For more information, see http://www.insideDHTML.com

  // This code can be reused as long as the above copyright notice is maintained

  // Manages a reference back to the Timeline object. This array is required
  // to allow objects to be passed between timer iterations.
  var timerList = new Array
 
  function Timeline() {
    // Records the sequence of events
    this.list = new Array
    // The number of milliseconds for the last element
    this.max = 0

    // The index is a key back into the timerList array
    this.index = timerList.length

    // The current number of milliseconds that have elapsed
    // in a running Timeline
    this.counter = 0

    // The number of times the Timeline has executed
    this.loopCount = 0

    // Cache this Timeline in the timerList   
    timerList[this.index] = this

    // Associate the add and run functions with the object
    this.add = Timeline_Add;
    this.run = Timeline_Run;

    // Is the timeline running
    this.running = false

    // How many times to run the timeline, default is infinite
    if (arguments[0]==null)
      this.loop = 1
    else
      this.loop = arguments[0]
  }

  function Timeline_Add(ms, fn) {
    // Add a new element to the Timeline.
    // Milliseconds (in increments of 100) and the function to call are required

    // Does any element exist for the current time slot?
    // An array is used to allow two events to occur at the same time
    if (this.list[ms]==null)
      this.list[ms] = new Array

    // Get the next available slot for this time
    var idx = this.list[ms].length
  
    // Create an object to cache the info about this event.
    this.list[ms][idx] = new Object
    var item = this.list[ms][idx]
    item.fn = fn
    // Check if this is the last event to occur
    if (ms>this.max)
      this.max = ms 

    // Any additional arguments after the function are passed to the timer
    // These arguments are passed in an array.
    
    var args = new Array
    for (var i=2; i < arguments.length; i++)
      args[i-2] = arguments[i]
    item.args = args
  }


  function Timeline_Run() {
    // This function is called when the timeline is running
    this.running = true
    // Call all events for the time slot
    for (var item in this.list[this.counter])  
        this.list[this.counter][item].fn(this.list[this.counter][item].args)

    // Check if you should loop
    if (this.counter>=this.max)   {
      if (this.loop>0)
        this.loopCount++
      this.counter = 0
    }

    // Find the next event. This is an optimization to make sure that
    // all timer calls actually have an event associated with them.
    var next = 100
    this.counter+=100
    while ((this.counter < this.max) && (this.list[this.counter]==null)) {
      this.counter+=100
      next += 100
    }

    // Call the next event or end the timeline
    if ((this.counter < =this.max)  && ((this.loop==0) || ((this.loopCount < this.loop) && (this.loop>0)))  )
      this.timerID = setTimeout("timerList["+this.index+"].run()",next)
    else 
      this.running=false
  }

The Timeline object is very helpful for creating animations. While not demonstrated, you are not limited to one event per time slot. You can actually synchronize and have multiple events occur at the same time. For example:

  var demo = new Timeline(0)
  demo.add(200,moveOver,div1, 100,100)
  // At 400ms move both div1 and div2
  demo.add(400,moveOver,div1, 10, -10)
  demo.add(400,moveOver,div2, 10, 10)

When using the Timeline object, take care to ensure the element's you are referencing are already loaded on the page. If you get object not defined errors, it probably means your script is executing before the element has been loaded. The last point to look out for is we designed the code to execute in 100 milliseconds increments (so a 450ms timed event will never fire). You can change this by changing the increment values assigned to the counter and next variables.

Let us know how you use the Timeline object. We are definitely planning on taking advantage of it in our future articles.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.