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.

Tagged as: clearInterval(), setInterval()