一.简介

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

二.画圆

昨天讲完pi,今天来画圆吧！

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

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="480" height="300" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">

var c = document.getElementById("myCanvas");
    var cxt = 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();

</script>

</body>
</html>

在Canvas里显示如下：

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

jscex闪亮登场！

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="480" height="300" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
    <script language="javascript" type="text/javascript" src="lib/uglifyjs-parser.js"></script>
    <script language="javascript" type="text/javascript" src="src/jscex.js"></script>
    <script language="javascript" type="text/javascript" src="src/jscex.builderBase.js"></script>
    <script language="javascript" type="text/javascript" src="src/jscex.async.js"></script>
<script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = 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();
</script>

</body>
</html>

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

三.在线演示

Your browser does not support the canvas element.

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

四.同步

本文已同步更新至：

HTML5实验室【目录】: http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html

转载于:https://www.cnblogs.com/iamzhanglei/archive/2011/08/16/2140113.html

javascript异步编程系列【一】----用Jscex画圆相关推荐

javascript异步编程系列【八】--Jscex版火拼俄罗斯
一.简介俄罗斯方块(Tetris, 俄文:Тетрис)是一款风靡全球的电视游戏机和掌上游戏机游戏,它由俄罗斯人阿列克谢·帕基特诺夫发明,故得此名.俄罗斯方块的基本规则是移动.旋转和摆放游戏自动输出 ...
Javascript异步编程之一异步原理
本系列的例子主要针对node.js环境,但浏览器端的原理应该也是类似的. 本人也是Javascript新手,把自己这段时间学习积累的要点总结下来,希望可以对同样在学习Javascript/node.j ...
Javascript模块化编程系列二: 模块化的标准化(CommonJS AMD)
前言 Javascript模块化编程系列一: 模块化的驱动在前一篇介绍了为什么要进行Javascript模块化编程.至于如何实现模块化,不同的开发组织和个人具体的实现方式肯定是不一样.如何统一一个规 ...
JavaScript异步编程的原理
1 想说的话 JavaScript异步编程是前端面试中一个重要内容.为了加深我对此部分内容的印象,故写此博客,主要介绍JS异步编程的运行原理. pre 栈队列 2 正文本文主要是阐述下面这张图的内容 ...
[书籍精读]《JavaScript异步编程》精读笔记分享
写在前面书籍介绍:本书讲述基本的异步处理技巧,包括PubSub.事件模式.Promises等,通过这些技巧,可以更好的应对大型Web应用程序的复杂性,交互快速响应的代码.理解了JavaScript的 ...
JavaScript 异步编程--Generator函数、async、await
JavaScript 异步编程–Generator函数 Generator(生成器)是ES6标准引入的新的数据类型,其最大的特点就是可以交出函数的执行的控制权,即:通过yield关键字标明需要暂停的语 ...
写给初学者的JavaScript异步编程和背后思想
导读: 对于接触JavaScript这门编程语言没有多久的本菜鸡而言,在相当长的一段时间内,我都完全无法理解这门语言中的异步编程,不明白什么叫异步编程以及为什么需要异步编程.为什么顺序执行程序就不行了 ...
【转】异步编程系列（Thread、Task、async/await、ajax等）
序经过一番努力,我写的异步编程系列也算有头有尾,当然不是说这个系列已经更新完毕,这个头尾只是表示新旧知识点都有简单涉及到,接下去我还会丰富这一系列并且有机会整个小应用(愿景是弄一个开源组件吧,结合s ...
网页javascript加载不出_写给初学者的JavaScript异步编程和背后思想
导读:对于接触JavaScript这门编程语言没有多久的本菜鸡而言,在相当长的一段时间内,我都完全无法理解这门语言中的异步编程,不明白什么叫异步编程以及为什么需要异步编程.为什么顺序执行程序就不行了呢 ...

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