Speeding Up Frame Rates For DHTML Animation in Win98 - DHTML Lab | 4 | WebReference

Speeding Up Frame Rates For DHTML Animation in Win98 - DHTML Lab | 4

Logo

Speeding Up Frame Rates For DHTML Animation in Win98
A Case Study



JavaScript Threading

In animations, the JavaScript methods,

are used to form timed loops that update element positions and the browser's display.

These methods exit their own processing thread and invoke a new thread, which after a set delay period executes independently of the rest of the script. The display then gets updated with an exit from this new thread [2]. In an animation loop, this repeats with each cycle of the timers. Web page elements are moved a little, displayed and the delay setting controls the movement speed and update rate.

In both methods, delays can be set with millisecond values. However, as we'll see shortly and except for one case, the actual delays provided do not have this value at all. Nevertheless, the delay period not only delays the expression execution (here the evaluated expression will be a function call, "moveIt()") but also provides a "time window" for event capture and for other scripts to run. These timeouts don't halt other tasks from executing! If the setTimeout() method or the setInterval() method were in the middle of a script, the statements just after it would execute immediately. It's only the expression the method refers to that's delayed from running.

Each call to setTimeout() delays the single evaluation of its expression. To get  repeat scheduled evaluations for an animation loop, setTimeout() can be placed inside the incremental movement function, recursively calling the function, as in the code below:

var halt;
function moveIt() {
    // Element stepping script goes here.
    if (!halt) setTimeout("moveIt()",milliseconds);
}
setTimeout("moveIt()",milliseconds);
This coding structure places the delay before each repeated execution of the script so it executes outside the delay period provided by the timer. I'll represent timer delays with square brackets around underscores 
timer delay: [__________]
and animation script execution time as vertical bars around periods 
script execution time: |...|
so the timeline for the executing code looks like this: 
[__________]|..|[__________]|.|[__________]|...|[__________]|.| etc.
On average, the timer delays are approximately the same but this may not be the case for the script execution time. The script that actually moves the image could execute at different speeds on the same machine or could vary between machines depending on the processor and, to some extent, the browser. So the time between repeats of the script will vary beyond that of the delays. 

A different coding structure that doesn't intersperse animation script execution time between the timer delays, places setTimeout() before the script. The animation script executes immediately after the timeout statement inside the delay period provided by the timer. Time between repeats of the script is more constant and updates should proceed more quickly but still vary with script execution time.

var halt;
function moveIt() {
    if (!halt) setTimeout("moveIt()",milliseconds);
    // Element stepping script goes here.
}
setTimeout("moveIt()",milliseconds);

The timeline looks like this:

[|..|______][|.|_______][|...|_____][|.|_______] etc.

A third way to code an animation loop is to use the setInterval() method. A call to setInterval() sets up a repeated evaluation of an expression. It doesn't have to be coded to repeatedly call itself like setTimeout() since one call does this automatically. The timeline looks like that of the second setTimeout() coding technique, where the animation script execution time is not added to the timer delays.

var timerID;
function moveIt() {
    // Element stepping script goes here.
}
timerID = setInterval("moveIt()",milliseconds);

Although the last two scripts have more constant updates rates, the significant degree of control over animations speed comes from the delay setting values.

Produced by Mark Szlazak and

All Rights Reserved. Legal Notices.
Created: July 11, 2000
Revised: July 11, 2000

URL: https://www.webreference.com/dhtml/column34/4.html