在迴圈內執行 ProgressBar 的 設定增加進度方式 怎麼沒有 SLEEP
最近剛好遇到一個問題，當在迴圈內執行 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，這樣速度就快多了。
來試試看範例吧
![showExample111[1]](http://files.corausir.org/images/ProgressBarSLEEP_C8E7/showExample1111.jpg "showExample111[1]")
原始碼 case0911.mxml
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> |
Random Posts
Loading…
相關文章 :
近期回應