JavaScript异步编程之用Jscex画圆

关注老赵的jscex很久了，jscex利用eval(str)的无限可能，从“$async” 到“async”，从不支持if else 等 到支持 if else等·，jscex正在不断完善和优化当中。jscex完全可以投入生产环境了 昨天讲完pi,今天来画圆吧!

创新互联坚实的技术研发基础赢得了行业内的良好口碑，公司成立十余年来，为1000+企业提供过网站建设、软件开发、搜索引擎优化技术、互联网大数据整合营销服务，多年的技术服务成功经验、众多的客户使我们能懂得更多，做得更好。"让您的网站跑起来"是我们一直追求的目标！

在支持html 5的浏览器中执行下面代码：

 
 
 
  
  
  
> 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 id="myCanvas" width="480" height="300" style="border:1px solid #c3c3c3;"> 
  
  
  
Your browser does not support the canvas element.  
  
  
  
 
  
  
  
 type="text/javascript"> 
  
  
  
 
  
  
  
    var c = document.getElementById("myCanvas");  
  
  
  
    var ccxt = c.getContext("2d");  
  
  
  
    var x = 150;  
  
  
  
    var y = 150;  
  
  
  
    var r = 100;  
  
  
  
    cxt.moveTo(x - r, y);  
  
  
  
    for (var i = x - r; i < x + r + 1; i++) {  
  
  
  
        var tempY = Math.pow(r * r - (x - i) * (x - i), 1 / 2);  
  
  
  
        cxt.lineTo(i, y + tempY);  
  
  
  
    }  
  
  
  
    cxt.moveTo(x - r, y);  
  
  
  
    for (var i = x - r; i < x + r + 1; i++) {  
  
  
  
        var tempY = Math.pow(r * r - (x - i) * (x - i), 1 / 2);  
  
  
  
        cxt.lineTo(i, y - tempY);  
  
  
  
    }  
  
  
  
      cxt.stroke();  
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 
 

在Canvas里显示如下：

[[49468]]

但是，我们明明是在画圆，怎么没有看到画圆的过程?javascript就是这样，解释完就画完了，而不会呈现解释的过程，这也是为什么javascript不用考虑多线程问题，仅仅UI线程。那么怎么看到画圆的过程?

jscex闪亮登场!

 
 
 
  
  
  
> 
  
  
  
 
  
  
  
 
  
  
  
 id="myCanvas" width="480" height="300" style="border:1px solid #c3c3c3;"> 
  
  
  
Your browser does not support the canvas element.  
  
  
  
 
  
  
  
     language="javascript" type="text/javascript" src="lib/uglifyjs-parser.js"> 
  
  
  
     language="javascript" type="text/javascript" src="src/jscex.js"> 
  
  
  
     language="javascript" type="text/javascript" src="src/jscex.builderBase.js"> 
  
  
  
     language="javascript" type="text/javascript" src="src/jscex.async.js"> 
  
  
  
 type="text/javascript"> 
  
  
  
    var c = document.getElementById("myCanvas");  
  
  
  
    var ccxt = c.getContext("2d");  
  
  
  
    var x = 150;  
  
  
  
    var y = 150;  
  
  
  
    var r = 100;  
  
  
  
    var drawAsync = eval(Jscex.compile("async", function () {  
  
  
  
        cxt.moveTo(x - r, y);  
  
  
  
        for (var i = x - r; i < x + r + 1; i++) {  
  
  
  
            $await(Jscex.Async.sleep(10));  
  
  
  
            var tempY = Math.pow(r * r - (x - i) * (x - i), 1 / 2);  
  
  
  
            cxt.lineTo(i, y + tempY);  
  
  
  
            cxt.stroke();  
  
  
  
        }  
  
  
  
        cxt.moveTo(x - r, y);  
  
  
  
        for (var i = x - r; i < x + r + 1; i++) {  
  
  
  
            $await(Jscex.Async.sleep(10));  
  
  
  
            var tempY = Math.pow(r * r - (x - i) * (x - i), 1 / 2);  
  
  
  
            cxt.lineTo(i, y - tempY);  
  
  
  
            cxt.stroke();  
  
  
  
        }  
  
  
  
        
  
  
  
    }));  
  
  
  
    drawAsync().start();  
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 
 

这样就可以目睹画圆全过程!

Your browser does not support the canvas element.

相关js请上https://github.com/JeffreyZhao/jscex或者http://www.sndacode.com/projects/jscex/wiki下载吧····

原文：http://www.cnblogs.com/iamzhanglei/archive/2011/08/16/2140113.html

【编辑推荐】

1. 基于Node.js、Express和Jscex开发的ToDo网站示例
2. 使用Jscex改善JavaScript异步编程体验
3. 使用HTML 5和Javascript设计绘图程序
4. 16个优秀的JavaScript教程和库推荐
5. Dart VS JavaScript之JavaScript的先天残疾