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的方式语意性很好，从刚刚分析得出，代码还可以这样写：