Using the SetInterval() Method

By Blue_Chi | Flash CS4 | ActionScript 3.0 | Beginner

This tutorial will teach you how to use the setInterval() method to execute a code segment repeatedly through specified time intervals. The same result could be achieved by using the more advanced Timer Class, but using the setInterval() could be an easier method to use for simpler projects that do not require the elaborate functionality of the Timer Class.

Using setInterval()

setInterval() is an ActionScript method that lets you execute a specific code repeatedly through a certain time interval in milliseconds. In order for setInterval() to execute code, that code must be run through a Function. The general format in which setInterval() is used is as follows:

setInterval (myFunction, myTimeLapse);

Where myFunction is the name of the function to be executed and myTimeLapse is the time interval between repetition instance of the code.

For example, we can output the word Hello once every two seconds by creating a function that outputs the word Hello and then pass this function to our setInterval() method.

function helloFun():void {
trace("Hello!");
}
setInterval(helloFun,2000);

You can learn more about the AS3 Trace() Command by reviewing our tutorial on this topic.

The function is first executed after 2000 milliseconds elapse (i.e. 2 seconds) and then again after each 2000 milliseconds forever.

You can test the code above to see the word Hello displayed in the output window once every two seconds until you stop the movie. Of course in reality you might want to be able to stop the repetitive execution of the code at some point. To do this you will need to use the clearInterval() method.

Using clearInterval()

clearInterval() is a method to be used to stop a setInterval() method. It can only be used on a setInterval() method that is stored in a variable. If a setInterval() method is not stored using any variable then there is no way to stop it. This can be done using the regular var keyword:

function helloFun():void {
trace("Hello!");
}

var myInterval:uint = setInterval (helloFun, 2000);

It is now possible to stop this interval at any time by passing the variable name of our setInterval() method to the clearInterval() method this way:

function helloFun():void {
trace("Hello!");
}

var myInterval:uint = setInterval (helloFun, 2000);
clearInterval(myInterval);

Our example above might not make sense in real life because we are clearing the interval before it even gets executed once. I'll show you a more practical example below.

Practical Example

We are going to create an example where a button will be moved along the stage using an interval. The user will be able to call the clearInterval() method to stop the animation.

Start off by creating a new Flash file in AS3 format, go through Window>Components and drag and instance of the Button component and place it on the left side of the stage. Now select this button and access the Properties Inspector, set the instance name of the button to my_btn.

AS3 SetInterval - Properties Inspector

Our graphical assets are now ready, right-click the only frame you have on your timeline and select Actions to open up the Actions panel.

We are going to start by creating the function that will move the button along the stage. We are going to name this function moveBtn, it will have the simple task of adding 10 points to the x position of the button:

function moveBtn():void {
my_btn.x += 10;
}

You can learn more about AS3 Functions by reviewing our tutorial on this topic.

We now need to have this function executed repeatedly. We will create a setInterval() method and store in a variable called myInterval:

function moveBtn():void {
my_btn.x += 10;
}

var myInterval:uint = setInterval (moveBtn, 500);

You can learn more about AS3 Variables by reviewing our tutorial on this topic.

You can test your movie (Control>Test Movie) now to see your button move.

We need to make our button stop the interval when clicked. To do this we need to register an event listener with our button, and then use this event listener execute the clearInterval() method. We are going to name this event listener stopMe() and it will registered with the MouseEvent.CLICK event:

function moveBtn():void {
my_btn.x += 10;
}

var myInterval:uint = setInterval (moveBtn, 500);

my_btn.addEventListener(MouseEvent.CLICK, stopMe);
function stopMe(e:MouseEvent):void{
clearInterval(myInterval);
}

You can learn more about Event Handling in AS3 by reviewing our tutorial on this topic.

That should do it. You can test the movie now again to see your button moving and then be able to click on the button to stop the movement!

This is a very simple example of course that does not showcase the full power of the setInterval() method. If you need greater timing functionality you should consider using the Timer Class which has a better interface and more elaborate methods.

This concludes our tutorial. I hope that you learnt something new from it. If you have any questions or comments please feel free to post them at the Republic of Code Forum.

- End of Tutorial