How to update a table with a columnstore index

2011/7/16 18:16:11英文系列评论(0)浏览(2013)

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

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

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

引入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异步编程系列】

javascript异步编程系列【一】----用Jscex画圆

javascript异步编程系列【二】----Jscex模拟重力场与google苹果logo的比较

javascript异步编程系列【三】----Jscex无创痕切入JqueryUI