JS異步編程四：Jscex+jQ打造游戲力度條
作者：當耐特磚家
其實，類似的條條無處不在！比如進游戲時候的進度條、魔獸世界里法師施法過程中讀的條等等。引入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()" />
但是通常情況下，我們需要它往返無限循環(huán)下去，那么我們應該這么實現(xiàn)：
- 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
- });
- }
- //}
- }
- }));
效果上面一模一樣，不會錯！
可以看得出來，內(nèi)部的兩個while不是同時執(zhí)行的，而是非常線性的，它們之間會相互等待，而且最開始的執(zhí)行順序是從上至下，內(nèi)部的while執(zhí)行完了，再跳到最外層的while重新執(zhí)行。
這種設計方式，無疑是優(yōu)雅的??！
上面那種三個while的方式語意性很好，從剛剛分析得出，代碼還可以這樣寫：
#p#
- 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,所以也會無限循環(huán)下去。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- </head>
- <body>
- <script src="http://files.cnblogs.com/iamzhanglei/jscex.min.js" type="text/javascript"></script>
- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
- <script>
- $(function () {
- $("#progressbar3").progressbar({
- value: 37
- });
- });
- </script>
- <div class="demo">
- <div id="progressbar3" style="width:200px"></div>
- </div><!-- End demo -->
- <script>
- var executeAsync21 = eval(Jscex.compile("async", function (proceedValues) {
- while (true) {
- while (proceedValues < 100) {
- proceedValues++;
- $await(Jscex.Async.sleep(100));
- $("#progressbar3").progressbar({
- value: proceedValues
- });
- }
- //if (proceedValues == 100) {
- while (proceedValues > 0) {
- proceedValues--;
- $await(Jscex.Async.sleep(100));
- $("#progressbar3").progressbar({
- value: proceedValues
- });
- }
- //}
- }
- }));
- executeAsync21(38).start();
- </script>
- </body>
- </html>
原文鏈接：http://www.cnblogs.com/iamzhanglei/archive/2011/08/23/2149918.html
【編輯推薦】
- JS異步編程一：用Jscex畫圓
- JS異步編程二：自由落體
- JS異步編程三：Jscex無創(chuàng)痕切入jQUI
- JS異步編程五：Jscex制作憤怒的小鳥
- 看JavaScript如何實現(xiàn)頁面自適
責任編輯：張偉
來源：
當耐特磚家的博客
