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

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

成都创新互联公司专注于平安网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供平安营销型网站建设，平安网站制作、平安网页设计、平安网站官网定制、微信小程序定制开发服务，打造平安网络公司原创品牌,更为您提供平安网站排名全网营销落地服务。

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

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

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

html：
 

js：

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

加入Jscex让它动起来：

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

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

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

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

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

    效果上面一模一样，不会错！

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

    这种设计方式，无疑是优雅的！！

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

    #p#

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

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

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7.  
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10.  
      11.   
  
  
  
    11.  
      12.   
  
  
  
    12.  
      13.
     
  •  
  •  
  •  
  •  

    • 文章题目：JS异步编程四：Jscex+jQ打造游戏力度条
    当前路径：http://www.hantingmc.com/qtweb/news24/112874.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    服务器托管知识

    行业网站建设

    服务器托管　　 　网站解决方案　　 　资阳网站建设　　 　成都网站制作　　 　内江智速网站建设　　 　成都网络推广　　 　手机app　　 　企业营销型网站　　 　西部信息机房　　 　雅安做网站　　 　成都二枢机房　　 　成都画册设计公司　　 　成都二枢电信服务器托管　　 　成都服务器租用　　 　响应式网站　　 　成都网站推广　　 　成都广告公司　　 　宜宾网站建设　　 　资阳服务器托管　　 　成都网站设计