doLater vs setInterval

Here’s a brief explanation of how you can delay the execution of a function and why you would want to do that.

Most programming languages have a way for you to execute code after a delay. These are timer functions – you set a delay and after that time period expires the code you specify executes. Java for example, has the Thread.sleep() method.

ActionScript is no different. If you want to make a clock for example, you’d like to have the second hand move every, well, second. Since the computer is capable of executing hundreds of instructions per second, you need to set a timer so that the code to position the hands of clock executes every second or 1,000 milliseconds.


setInterval

setInterval( obj:Object, fn:String, delay:Number [,arg1, arg2, ...] ) : Number

The setInterval method has three required parameters:

obj: This is the object in whose context the function is found. Often this is used.
fn: This is the name of the function defined on obj which is executed every delay milliseconds.
delay: This the amount of time between executions of the function.

You can also pass extra arguments to setInterval if the fn function requires them.

setInterval returns a unique Number identify the interval created.

Keep in mind that the function is executed repeatedly until told to stop using clearInterval:

clearInterval( intervalID:Number ) : Void

Pass the value returned by setInterval to clearInterval.

doLater

Unlike traditional programming languages, ActionScript is executed within the Flash Player. If you are at all familiar with Flash, you know that Flash is based on the movie concept of a timeline. You place your symbols and code in various frames. The Flash movies are run at specified frame rates. Flex movies are executed at 24 fps.

What you may not know, is that Flash updates the visuals (color, object placement, size, etc.) at the end of the frame. This gives the ActionScript in the frame a chance to execute and set up the visual changes. For instance, if you use ActionScript to change a line from blue, to black, to red within the code for a single frame, you will see only a red line. That’s because each change the line’s color is not changing the visual aspect of the line – it is merely changing the line’s property. So changing the property from blue to black to red is overwriting the property. When the frame code has finished, Flash updates the visual aspect of the line to last value of the property – red in this case.

So what does this have to do with doLater? Everything. The doLater method allows you to execute code once the UI has been updated.

The doLater method is defined for the Flex mx.core.UIObject, so any class that extends a control, container, or chart can use doLater.

When to use doLater

It is not always obvious when to use doLater. Typically, if you try to do something and the UI has not updated, put the last thing you want to do into a doLater method.

For example: suppose you want to change the dataProvider for a List and then have the list positioned to show a particular item in the new list. You might try this first:

myList.dataProvider = new_data;
myList.vPosition = 45;

A couple of things could have: it could work as you expect (unlikely) or the new data will appear, but the list will not be positioned correctly (most likely).

When you change the dataProvider for a list, the UI is normally updated at the end of the frame in which the dataProvider was assigned. Since the instruction to change the position of the list will have happened before the UI changed, position 45 may not exist (or may not yield the correct location once the data has been formatted for the display).

You make this work properly by putting the change to vPosition in a doLater method:

function scrollLater() {
myList.vPosition = 45;
}

Now write the code to change the dataProvider and scroll the list:

myList.dataProvider = new_data;
doLater( this, "scrollLater" );

The doLater method’s signature is similar to that of setInterval:

doLater( obj:Object, fn:String [,args:Array] ) : Void

obj: This is the object on which the function is to operate. The object is often this.
fn: This is the name of the function defined on obj.
args: This is an optional Array of arguments. For example: ["cats",345]. The function itself would be defined to take two arguments: fn( animal:String, quantity:Number ).

doLater has several important differences with setInterval:

  • The doLater function executes once; the setInterval function executes repeatedly until cleared.
  • The doLater function executes at the end of the current frame; the setInterval function executes after a specified delay.
  • The doLater function does not return any arguments; the setInterval function returns an interval ID.

An example of using doLater can be found in this blog under the Ticker
application. I use doLater to move text across the screen.

Summary

Use doLater if you do not need to specify an exact delay for the task and you need to do something once. Use setInterval if you want to repeatedly do something or if you want to delay task for a specific amount of time.