javascript异步编程系列【四】----Jscex+Jquery UI打造游戏力度条

如果大家玩过桌球类游戏的话，对力度条的概念一定不会陌生，如下图：

还有竖直方向上的力度条，如下图：

其实，类似的条条无处不在！比如进游戏时候的进度条、魔兽世界里法师施法过程中读的条等等······

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

     var executeAsync = eval(Jscex.compile("async",  function (proceedValues) {

         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

                    });

                }

            }

        }
}));  

这样相当于永远跳不出最外层的proceedValues < 100,所以也会无限循环下去。

最新的Jscex 库，请上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下载吧····

【更多javascript异步编程系列】

javascript异步编程系列【一】----用Jscex画圆

javascript异步编程系列【二】----Jscex模拟重力场与google苹果logo的比较

javascript异步编程系列【三】----Jscex无创痕切入JqueryUI