其实，类似的条条无处不在！比如进游戏时候的进度条、魔兽世界里法师施法过程中读的条等等······
引入jquery ui,我们可以轻松得到下面这个静止的力度条：
html：
<div></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> </div> <input type="button" value="开始" />
但是通常情况下，我们需要它往返无限循环下去，那么我们应该这么实现：
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 }); } //} } }));
效果上面一模一样，不会错！
可以看得出来，内部的两个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,所以也会无限循环下去。
<!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="https://files.cnblogs.com/iamzhanglei/jscex.min.js" type="text/javascript"></script> <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script src="https://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> <div></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>