The following example shows how you can execute methods at regular intervals using the setInterval() method. It also shows how you can stop the methods from being executed by calling the clearInterval() method and passing the interval’s unique id returned from the setInterval() method.

Full code after the jump.

It is important to note that the setInterval() method will cause the method to be called continuously until the clearInterval() method is called. If you only want the method to be called once after a delay, you can use the setTimeout() method, or Timer class.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/14/creating-timers-using-the-setinterval-method/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.dataGridClasses.DataGridColumn;

            private var interval:uint;

            private function startInt():void {
                interval = setInterval(getTime, 1000); // 1 second

                startButton.enabled = false;
                stopButton.enabled = true;
            }

            private function stopInt():void {
                if (interval) {
                    clearInterval(interval);
                    Alert.show("Interval stopped.");

                    startButton.enabled = true;
                    stopButton.enabled = false;
                }
            }

            private function getTime():void {
                arrColl.addItemAt({date:new Date(), timer:getTimer()}, 0);
            }

            private function date_labelFunc(item:Object, col:DataGridColumn):String {
                var dat:Date = item.date as Date;
                return dat.toTimeString();
            }

            private function timer_labelFunc(item:Object, col:DataGridColumn):String {
                return numberFormatter.format(item.timer);
            }
        ]]>
    </mx:Script>

    <mx:NumberFormatter id="numberFormatter"
            useThousandsSeparator="true" />

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="startButton"
                label="start interval"
                click="startInt();" />
        <mx:Button id="stopButton"
                label="stop interval"
                enabled="false"
                click="stopInt();" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="list"
            dataProvider="{arrColl}"
            verticalScrollPolicy="on"
            width="300">
        <mx:columns>
            <mx:DataGridColumn dataField="date"
                    headerText="date:"
                    labelFunction="date_labelFunc"
                    width="200" />
            <mx:DataGridColumn dataField="timer"
                    headerText="timer (ms):"
                    labelFunction="timer_labelFunc"
                    textAlign="right"
                    width="100" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

Of course, that is a relatively simple example. If you want to get slightly more complex, you can pass additional parameters to the setInterval() method which will get passed along to your specified method. In the following example, we pass two parameters to our getTime() method. The first parameter is a simple String object (“peter”) and the second parameter is an int returned from the getTimer() method. It is important to note that the getTimer() being passed to the custom getTime() method via setInterval() is only called once, not on every iteration of the interval.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/14/creating-timers-using-the-setinterval-method/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.dataGridClasses.DataGridColumn;

            private var interval:uint;

            private function startInt():void {
                interval = setInterval(getTime, 1000, "peter", getTimer());

                startButton.enabled = false;
                stopButton.enabled = true;
            }

            private function stopInt():void {
                if (interval) {
                    clearInterval(interval);
                    Alert.show("Interval stopped.");

                    startButton.enabled = true;
                    stopButton.enabled = false;
                }
            }

            private function getTime(param1:*, param2:*):void {
                arrColl.addItemAt({date:new Date(), p1:param1, p2:param2, timer:getTimer()}, 0);
            }

            private function date_labelFunc(item:Object, col:DataGridColumn):String {
                var dat:Date = item.date as Date;
                return dat.toTimeString();
            }

            private function timer_labelFunc(item:Object, col:DataGridColumn):String {
                return numberFormatter.format(item[col.dataField]);
            }

            private function diff_labelFunc(item:Object, col:DataGridColumn):String {
                return ((item.timer - item.p2) / 1000).toFixed(2);
            }
        ]]>
    </mx:Script>

    <mx:NumberFormatter id="numberFormatter"
            useThousandsSeparator="true" />

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="startButton"
                label="start interval"
                click="startInt();" />
        <mx:Button id="stopButton"
                label="stop interval"
                enabled="false"
                click="stopInt();" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="list"
            dataProvider="{arrColl}"
            verticalScrollPolicy="on"
            width="100%">
        <mx:columns>
            <mx:DataGridColumn dataField="date"
                    headerText="date:"
                    labelFunction="date_labelFunc"
                    width="200" />
            <mx:DataGridColumn dataField="timer"
                    headerText="timer (ms):"
                    labelFunction="timer_labelFunc"
                    textAlign="right"
                    width="100" />
            <mx:DataGridColumn dataField="p1"
                    headerText="name:"
                    width="100" />
            <mx:DataGridColumn dataField="p2"
                    headerText="start (ms):"
                    labelFunction="timer_labelFunc"
                    textAlign="right"
                    width="100" />
            <mx:DataGridColumn headerText="diff (sec):"
                    labelFunction="diff_labelFunc"
                    textAlign="right"
                    width="100" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

0 Responses to Creating timers using the setInterval() method

  1. Not to rain on your parade, but setInterval() is no longer the recommended way to accomplish this.

    Take a look at the timer object

    http://livedocs.adobe.com/flex/2/langref/flash/utils/Timer.html

  2. peterd says:

    Kevin,

    Yep. Good point, I should have mentioned that in my article. The setInterval() and setTimeout() methods are considered the “old school” and the new, recommended method is to use the Timer class (which was actually going to be subject of today’s post).

    Thanks,
    Peter

  3. No problem! I really enjoy what you are doing as well! Keep up the good work!

    There can never be too many examples in the community!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree