JS异步编程四:Jscex+jQ打造游戏力度条

开发 前端
其实,类似的条条无处不在!比如进游戏时候的进度条、魔兽世界里法师施法过程中读的条等等。引入jquery ui,我们可以轻松得到下面这个静止的力度条......

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

a

还有竖直方向上的力度条,如下图:

xx

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

引入jquery ui,我们可以轻松得到下面这个静止的力度条:

html:

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

js:

  1. $(function () {  
  2.     $(".progressbar").progressbar({  
  3.         value: 37  
  4.     });  

加入Jscex让它动起来:

  1. <script type="text/javascript">  
  2.     $(function () {  
  3.         $(".progressbar").progressbar({  
  4.             value: 5  
  5.         });  
  6.     });  
  7.     var executeAsync = eval(Jscex.compile("async"function (proceedValues) {  
  8.         while (proceedValues < 100) {  
  9.             proceedValues++;  
  10.             $await(Jscex.Async.sleep(50));  
  11.             $(".progressbar").progressbar({  
  12.                 value: proceedValues  
  13.             });  
  14.         }  
  15.     }));  
  16.     function btnExecuteAsync_onclick() {  
  17.         executeAsync(5).start();  
  18.     }  
  19. </script>  
  20. <div class="progressbar" style="width: 20%">  
  21. </div>  
  22. <input id="btnExecuteAsync" type="button" value="开始" onclick="return btnExecuteAsync_onclick()" /> 

但是通常情况下,我们需要它往返无限循环下去,那么我们应该这么实现:

  1. var executeAsync = eval(Jscex.compile("async"function (proceedValues) {  
  2.         while (true) {  
  3.             while (proceedValues < 100) {  
  4.                 proceedValues++;  
  5.                 $await(Jscex.Async.sleep(10));  
  6.                 $(".progressbar").progressbar({  
  7.                     value: proceedValues  
  8.                 });  
  9.             }  
  10.             if (proceedValues == 100) {  
  11.                 while (proceedValues > 0) {  
  12.                     proceedValues--;  
  13.                     $await(Jscex.Async.sleep(10));  
  14.                     $(".progressbar").progressbar({  
  15.                         value: proceedValues  
  16.                     });  
  17.                 }  
  18.             }  
  19.         }  
  20.     })); 

就在这个时候,我一不小心,把if (proceedValues == 100) { } 注释掉了,代码变成这个样子:

  1. var executeAsync2 = eval(Jscex.compile("async"function (proceedValues) {  
  2.         while (true) {  
  3.             while (proceedValues < 100) {  
  4.                 proceedValues++;  
  5.                 $await(Jscex.Async.sleep(10));  
  6.                 $(".progressbar3").progressbar({  
  7.                     value: proceedValues  
  8.                 });  
  9.             }  
  10.             //if (proceedValues == 100) {  
  11.             while (proceedValues > 0) {  
  12.                 proceedValues--;  
  13.                 $await(Jscex.Async.sleep(10));  
  14.                 $(".progressbar3").progressbar({  
  15.                     value: proceedValues  
  16.                 });  
  17.             }  
  18.             //}  
  19.         }  
  20.  })); 

效果上面一模一样,不会错!

可以看得出来,内部的两个while不是同时执行的,而是非常线性的,它们之间会相互等待,而且最开始的执行顺序是从上至下,内部的while执行完了,再跳到最外层的while重新执行。

这种设计方式,无疑是优雅的!!

上面那种三个while的方式语意性很好,从刚刚分析得出,代码还可以这样写

#p#

  1. var executeAsync = eval(Jscex.compile("async"function (proceedValues) {  
  2.         while (proceedValues < 100) {  
  3.             proceedValues++;  
  4.             $await(Jscex.Async.sleep(10));  
  5.             $(".progressbar").progressbar({  
  6.                 value: proceedValues  
  7.             });  
  8.             if (proceedValues == 100) {  
  9.                 while (proceedValues > 0) {  
  10.                     proceedValues--;  
  11.                     $await(Jscex.Async.sleep(10));  
  12.                     $(".progressbar").progressbar({  
  13.                         value: proceedValues  
  14.                     });  
  15.                 }  
  16.             }  
  17.         }  
  18. })); 

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title></title> 
  5. </head> 
  6. <body> 
  7. <script src="http://files.cnblogs.com/iamzhanglei/jscex.min.js" type="text/javascript"></script> 
  8. <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" /> 
  9. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
  10. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> 
  11. <script> 
  12. $(function () {  
  13. $("#progressbar3").progressbar({  
  14. value: 37  
  15. });  
  16. });  
  17. </script> 
  18. <div class="demo"> 
  19. <div id="progressbar3" style="width:200px"></div> 
  20. </div><!-- End demo --> 
  21. <script> 
  22. var executeAsync21 = eval(Jscex.compile("async", function (proceedValues) {  
  23. while (true) {  
  24. while (proceedValues < 100) {  
  25. proceedValues++;  
  26. $await(Jscex.Async.sleep(100));  
  27. $("#progressbar3").progressbar({  
  28. value: proceedValues  
  29. });  
  30. }  
  31. //if (proceedValues == 100) {  
  32. while (proceedValues > 0) {  
  33. proceedValues--;  
  34. $await(Jscex.Async.sleep(100));  
  35. $("#progressbar3").progressbar({  
  36. value: proceedValues  
  37. });  
  38. }  
  39. //}  
  40. }  
  41. }));  
  42. executeAsync21(38).start();  
  43. </script> 
  44. </body> 
  45. </html> 

原文链接:http://www.cnblogs.com/iamzhanglei/archive/2011/08/23/2149918.html

【编辑推荐】

  1. JS异步编程一:用Jscex画圆
  2. JS异步编程二:自由落体
  3. JS异步编程三:Jscex无创痕切入jQUI
  4. JS异步编程五:Jscex制作愤怒的小鸟
  5. 看JavaScript如何实现页面自适

 

责任编辑:张伟 来源: 当耐特砖家的博客
相关推荐

2011-11-11 14:05:13

Jscex

2012-06-14 13:40:04

JavaScript

2012-06-14 14:03:19

JavaScript

2012-06-14 14:42:42

JavaScript

2011-11-10 10:23:56

Jscex

2011-07-27 14:10:43

javascript

2011-11-16 13:22:38

Jscex

2011-11-11 13:38:39

Jscex

2011-11-17 16:14:25

Jscex

2012-06-14 13:55:39

JavaScript

2019-01-17 10:58:52

JS异步编程前端

2014-10-30 10:28:55

Node.js

2013-04-01 15:38:54

异步编程异步编程模型

2011-11-10 15:43:23

JavaScript

2011-10-18 10:17:13

Node.js

2023-09-25 12:13:00

Android架构

2013-04-01 15:25:41

异步编程异步EMP

2021-03-23 07:56:54

JS基础同步异步编程EventLoop底层

2020-10-15 13:29:57

javascript

2011-02-22 08:49:16

.NET同步异步
点赞
收藏

51CTO技术栈公众号