在迴圈內執行 ProgressBar 的設定增加進度方式怎麼沒有 SLEEP

首頁 > FLEX, 程式設計 > 在迴圈內執行 ProgressBar 的設定增加進度方式怎麼沒有 SLEEP

在迴圈內執行 ProgressBar 的設定增加進度方式怎麼沒有 SLEEP

2009年9月11日瀏覽次數 : 4,054

閱讀評論發表評論

最近剛好遇到一個問題，當在迴圈內執行 this.progressBar.setProgress(指標,總量) 這個方法的時候，如果直接把他寫在一個 for 迴圈內的話，不管怎樣，一定是全部加總完，直接跳 100% 給你看，看到最後的結果，是因為 for 迴圈的執行速度太快，而且整個執行緒都被 pending 住，所以畫面不會進行重繪。

圖 : 一瞬間，1000 次的加總就完成了，也沒有任何進度表示

因為速度太快，所以直接就從 0 衝向 100% 了，但是呢，並不是真的因為是太快所以就直接跳 100 % 喔，如果不相信的話可以把迴圈的數字加大，包準跑到天荒地老，progressBar 也是直接給你跑到 100 % 啦。

原因是因為他在執行 script 的時候整個 STAGE 是不會進行重繪的，既然前端的顯示沒有 REDRAW 的話，那 progressBar 又怎麼會更新它的進度呢，所以等到他全部都處理完，才會去重新繪製畫面。

如果是一般的做法，通常我們想法會讓迴圈停止，讓他 SLEEP 一下，但是由於 FLASH 是時間軸的概念，因此如果想要讓方法先暫時停止下來我們就必須使用 setInterval() ，這個方法我們在 javascript 很常使用，但是呢，我們通常使用 setTimeout() ，是不是很熟悉呢，其實不斷重複的應該是用 setInterval() 會比較正確。因此我們把方法改一下，就會得到以下的結果。

現在你會看到，progressBar 的進度顯示出現了，但是他的速度並沒有很快，因為在每執行一次加總的時候我們還會等待 1 ms 的時間，並且重繪一次畫面，因此速度慢了許多。但是為了進度顯示，還是得犧牲一下，當然還有其他方式可以處理囉，例如達到某些次數才發布 EVENT，這樣速度就快多了。

來試試看範例吧

原始碼 case0911.mxml

^?View Code FLEX

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="14">
 
	<mx:Script>
		<![CDATA[
			import flash.utils.clearInterval;
			import flash.utils.setInterval;
 
			private function runForLoop():void{
 
				for(var i:int=0;i<10000;i++){
					trace(i+1);
					this.progressBar.setProgress(i+1,10000);
				}
			}
 
			private function runIntervalLoop():void{
 
				setInterval(setProgress,1);
			}
			private var index:int = 0;
			private function setProgress():void{
				if(this.index < 10000){
					this.index++;
					trace(this.index);
					this.progressBar.setProgress(this.index,10000);
				}else{
					clearInterval(0);
				}
			}
 
		]]>
	</mx:Script>
 
	<mx:ProgressBar id="progressBar" width="456" mode="manual"/>
	<mx:HBox width="482" horizontalAlign="center">
		<mx:Button label="直接使用 FOR 迴圈 增加進度" click="runForLoop()"/>
		<mx:Button label="使用 setInterval 增加進度" click="runIntervalLoop()"/>
	</mx:HBox>
 
</mx:Application>