如果大家玩過桌球類游戲的話，對(duì)力度條的概念一定不會(huì)陌生，如下圖：

 還有豎直方向上的力度條，如下圖：

 其實(shí)，類似的條條無處不在!比如進(jìn)游戲時(shí)候的進(jìn)度條、魔獸世界里法師施法過程中讀的條等等······

引入jquery ui,我們可以輕松得到下面這個(gè)靜止的力度條：

html：

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

js：

$(function () {  
$(".progressbar").progressbar({  
value: 37  
});  
}); 

效果如下：

加入Jscex讓它動(dòng)起來：

 <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)下去，那么我們應(yīng)該這么實(shí)現(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  
});  
}  
}  
}  
})); 

效果如下：

就在這個(gè)時(shí)候，我一不小心，把if (proceedValues == 100) { } 注釋掉了，代碼變成這個(gè)樣子：

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

我運(yùn)行一下，等著他報(bào)ERROR,結(jié)果奇跡出現(xiàn)了，效果如下，和上面一模一樣，沒有報(bào)錯(cuò)!

可以看得出來，內(nèi)部的兩個(gè)while不是同時(shí)執(zhí)行的，而是非常線性的，它們之間會(huì)相互等待，而且最開始的執(zhí)行順序是從上至下，內(nèi)部的while執(zhí)行完了，再跳到最外層的while重新執(zhí)行。

這種設(shè)計(jì)方式，無疑是優(yōu)雅的!!

上面那種三個(gè)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  
});  
}  
}  
}  
})); 

這樣相當(dāng)于永遠(yuǎn)跳不出最外層的proceedValues < 100,所以也會(huì)無限循環(huán)下去。

***的Jscex 庫，請(qǐng)上https://github.com/JeffreyZhao/jscex或者h(yuǎn)ttp://www.sndacode.com/projects/jscex/wiki下載吧····

【更多javascript異步編程系列】

1. JavaScript異步編程之用Jscex畫圓
2. 使用Jscex改善JavaScript異步編程體驗(yàn)
3. JavaScript異步編程之Jscex無創(chuàng)痕切入jQueryUI
4. Jscex模擬重力場(chǎng)與google蘋果logo的比較