JS非同步編程四：Jscex+jQ打造遊戲力度條(1)

如果大家玩過桌球類遊戲的話，對力度條的概念一定不會陌生，如：

還有豎直方向上的力度條，如：

其實，類似的條條無處不在！比如進遊戲時候的進度條、魔獸世界裡法師施法過程中讀的條等等。

引入jquery ui,我們可以輕鬆得到下面這個靜止的力度條：

html：

 

  
<div class="progressbar" style="width: 20%"></div> 
 

js：

 

  
$(function () {  
  
    $(".progressbar").progressbar({  
  
        value: 37  
  
    });  
 

加入Jscex讓它動起來：

 

  
<script type="text/javascript">  
  
    $(function () {  
  
        $(".progressbar").progressbar({  
  
            value: 5  
  
        });  
  
    });  
  
    var executeAsync = eval(Jscex.compile("async", function (proceedValues) {  
  
        while (proceedValues < 100) {  
  
            proceedValues++;  
  
            $await(Jscex.Async.sleep(50));  
  
            $(".progressbar").progressbar({  
  
                value: proceedValues  
  
            });  
  
        }  
  
    }));  
  
    function btnExecuteAsync_onclick() {  
  
        executeAsync(5).start();  
  
    }  
  
</script>  
  
<div class="progressbar" style="width: 20%">  
  
</div>  
  
<input id="btnExecuteAsync" type="button" value="開始" onclick="return btnExecuteAsync_onclick()" /> 
 

但是通常情況下，我們需要它往返無限迴圈下去，那麼我們應該這麼實現：

 

  
var executeAsync = eval(Jscex.compile("async", function (proceedValues) {  
  
        while (true) {  
  
            while (proceedValues < 100) {  
  
                proceedValues++;  
  
                $await(Jscex.Async.sleep(10));  
  
                $(".progressbar").progressbar({  
  
                    value: proceedValues  
  
                });  
  
            }  
  
            if (proceedValues == 100) {  
  
                while (proceedValues > 0) {  
  
                    proceedValues--;  
  
                    $await(Jscex.Async.sleep(10));  
  
                    $(".progressbar").progressbar({  
  
                        value: proceedValues  
  
                    });  
  
                }  
  
            }  
  
        }  
  
    })); 
 

就在這個時候，我一不小心，把if (proceedValues == 100) { } 注釋掉了，代碼變成這個樣子：

 

  
var executeAsync2 = eval(Jscex.compile("async", function (proceedValues) {  
  
        while (true) {  
  
            while (proceedValues < 100) {  
  
                proceedValues++;  
  
                $await(Jscex.Async.sleep(10));  
  
                $(".progressbar3").progressbar({  
  
                    value: proceedValues  
  
                });  
  
            }  
  
            //if (proceedValues == 100) {  
  
            while (proceedValues > 0) {  
  
                proceedValues--;  
  
                $await(Jscex.Async.sleep(10));  
  
                $(".progressbar3").progressbar({  
  
                    value: proceedValues  
  
                });  
  
            }  
  
            //}  
  
        }  
  
 })); 
 

效果上面一模一樣，不會錯！

可以看得出來，內部的兩個while不是同時執行的，而是非常線性，它們之間會相互等待，而且最開始的執行順序是從上至下，內部的while執行完了，再跳到最外層的while重新執行。

這種設計方式，無疑是優雅的！！

上面那種三個while的方式語意性很好，從剛剛分析得出，代碼還可以這樣寫：