Flex之旅：第二部分：容器与布局(4)--- callLater()方法的使用

为了提高容器的启动性能，和确保数据的完整性就不得不提到callLater()

一下内容来自的我对官方的翻译：

 callLater()会将它方法内部要执行的“操作”排队等候，直到下一帧的时候，才被执行，而不是当前帧执行。如果不使用callLater()，在某些情况下是会产生问题的。比如，

你的某个“操作“需要去访问某个组件的属性，但是当前帧下，这个组件的属性并没有被设置好，那么你在当前帧引用这个属性的时候，必然会产生空指针问题。

callLater()方法最普遍的使用时机是在creationComplete事件响应的时候，这样可以确保，在针对于某些组件的特殊操作的时候，其组件已经真正的创建好了！

所有的继承自UIComponent的子类都可以调用callLater()方法

官方api的解释：

下面的例子延迟了doSomething()方法的调用，但是当调用doSomething()方法的时候，Flex会从数组中，将Event对象，和“Product Description” String 传入doSomething()方法里面。

callLater(doSomething, [event, "Product Description"]); 
... 
private function doSomething(event:Event, title:String):void { 
    ... 
}

下面的例子，通过调用callLater()方法确保，当新的一条数据，添加到DataGrid的时候，Flex会成功地在这条新数据上设置焦点。

<?xml version="1.0"?>
<!-- layoutperformance/CallLaterAddItem.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark"
    initialize="initData()">

    <fx:Script><![CDATA[
        import mx.collections.*;
        private var DGArray:Array = [
            {Artist:'Pavement', Album:'Charred Walls', Price:11.99},
            {Artist:'Pavement', Album:'Good For You', Price:11.99}];
            
        [Bindable]
        public var initDG:ArrayCollection;
        //Initialize initDG ArrayCollection variable from the Array.
        
        public function initData():void {
            initDG=new ArrayCollection(DGArray);
        }
        
        public function addNewItem():void {
            var o:Object;
            o = {Artist:'Pavement', Album:'Tradio', Price:11.99};
            initDG.addItem(o);
            callLater(focusNewRow);
        }

        public function focusNewRow():void {
            myGrid.editedItemPosition = { 
                columnIndex:0,rowIndex:myGrid.dataProvider.length-1
            };
        }
        
    ]]></fx:Script>

    <s:VGroup>
        <mx:DataGrid id="myGrid" width="350" height="200" dataProvider="{initDG}"  editable="true">
            <mx:columns>
                <fx:Array>
                    <mx:DataGridColumn dataField="Album" />
                    <mx:DataGridColumn dataField="Price" />
                </fx:Array>
            </mx:columns> 
        </mx:DataGrid>

        <s:Button id="b1" label="Add New Item" click="addNewItem()"/>
    </s:VGroup>
    
</s:Application>

另外一个是使用callLater()方法是创建递归调用。有些场景，比如动画，文本滚动，某个方法需要不停的在下一帧被重复的调用。

下面的例子，是通过HSlider的调整，去影响文本横向显示的滚动速度。

<?xml version="1.0"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"    
	xmlns:mx="library://ns.adobe.com/flex/mx"     
	xmlns:s="library://ns.adobe.com/flex/spark" width="400" height="200">
	
	<fx:Script><![CDATA[
		
		[Bindable]
		public var text:String = "SLAR:95.5....TIBA:42....RTF:34.15....AST:23.42";
		[Bindable]
		public var speed:Number = 5;
		
		public function initTicker():void {
			theText.move( this.width+10, 0 ); // Start the text on the right side.
			callLater(moveText);
		}
		
		public function moveText():void {
			var xpos:Number = theText.x;
			if( xpos-speed+theText.width < 0 ) {
				xpos = this.width+10; // Start the text on the right side.
			}
			xpos -= speed;
			theText.move(xpos,0);
			callLater(moveText);
		}
		
		public function changeSpeed():void {
			speed = speedSelector.value;
		}
		
	]]></fx:Script>
	
	<s:Panel title="Ticker Sample" width="400" height="200">
		<s:VGroup>
			<mx:Canvas creationComplete="initTicker()"
					   horizontalScrollPolicy="off" backgroundColor="red" color="white"
					   width="400">
				<mx:Label id="theText" text="{text}" y="0"/>
			</mx:Canvas>
			<mx:HBox>
				<mx:Label text="Speed:"/>
				<mx:HSlider minimum="1" maximum="10" value="{speed}"
							id="speedSelector" snapInterval="1" tickInterval="1"
							change="changeSpeed()"/>
			</mx:HBox>
		</s:VGroup>
	</s:Panel>
</s:Application>