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  
  
  
  
  
});  
  
  
  
  
}  
  
  
  
  
//}  
  
  
  
  
}  
  
  
  
  
})); 
 
 
 
 

我运行一下，等着他报ERROR,结果奇迹出现了，效果如下，和上面一模一样，没有报错!

可以看得出来，内部的两个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异步编程系列】

1. JavaScript异步编程之用Jscex画圆
2. 使用Jscex改善JavaScript异步编程体验
3. JavaScript异步编程之Jscex无创痕切入jQueryUI
4. Jscex模拟重力场与google苹果logo的比较