如果大家玩过桌球类游戏的话,对力度条的概念一定不会陌生,如下图:
还有竖直方向上的力度条,如下图:
其实,类似的条条无处不在!比如进游戏时候的进度条、魔兽世界里法师施法过程中读的条等等。
引入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
- });
- }
- //}
- }
- }));
效果上面一模一样,不会错!
可以看得出来,内部的两个while不是同时执行的,而是非常线性的,它们之间会相互等待,而且最开始的执行顺序是从上至下,内部的while执行完了,再跳到最外层的while重新执行。
这种设计方式,无疑是优雅的!!
上面那种三个while的方式语意性很好,从刚刚分析得出,代码还可以这样写:
#p#
- 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="http://files.cnblogs.com/iamzhanglei/jscex.min.js" type="text/javascript"></script>
- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
- <script src="http://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 class="demo">
- <div id="progressbar3" style="width:200px"></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>
原文链接:http://www.cnblogs.com/iamzhanglei/archive/2011/08/23/2149918.html
【编辑推荐】