14
Feb
08

Creating timers using the setInterval() method

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.


3 Responses to “Creating timers using the setInterval() method”


  1. 1 Kevin Schmidt Feb 15th, 2008 at 6:42 am

    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. 2 peterd Feb 15th, 2008 at 7:06 am

    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. 3 Kevin Schmidt Feb 15th, 2008 at 8:03 am

    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

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".




February 2008
M T W T F S S
« Jan   Mar »
 123
45678910
11121314151617
18192021222324
2526272829  

Badge Farm

  • Firefox 2
  • Powered by Redoable 1.2
  • Feeds burnt by Feedburner
  • Feed