一个异步的js类库,应用价值不大,所以代码也没在维护了。在做h5特效或者游戏动画方面有点用处。
$await是Windjs的核心api。具体可以check 浅谈Jscex的$await语义及异步任务模型
具体使用demo:
var A = eval(Wind.compile("async", function () {
console.log("Start A");
$await(Wind.Async.sleep(3000));
console.log("Finish A");
}));
var B = eval(Wind.compile("async", function () {
console.log("Start B");
$await(Wind.Async.sleep(5000));
console.log("Finish B");
}));
var C = eval(Wind.compile("async", function () {
console.log("Start C");
console.log("Finish C");
}));
var run = eval(Wind.compile('async', function() {
$await(A());
$await(B());
$await(C());
}));
run().start();
简单地说就是将线程挂起了。我们可以试着用Windjs画一个圆,在大部分平台上编写这样的程序并没有太大困难,只要在绘制出图形之后短暂地阻塞线程就行了。可惜,在JavaScript中我们只能“一蹴而就”,要暂停的话,只能使用setTimeout进行回调了。不过,这也正是Windjs的用武之地,用Windjs编写的代码需要“暂停”,只需要简单地调用sleep异步方法,一切都很直接。js里$await方法一定要封装在eval中。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> </title> <script src="http://files.cnblogs.com/files/zichi/wind-all-0.7.3.js"></script> <script> window.onload = function() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var x = 250; var y = 250; var r = 100; var frontX = x - r; var frontY = y; var drawAsync = eval(Wind.compile('async', function() { for(var i = x - r; i <= x + r; i++) { var tempY = Math.sqrt(r * r - (x - i) * (x - i)); ctx.beginPath(); ctx.lineWidth = 5; ctx.moveTo(frontX, frontY); ctx.lineTo(i, y+ tempY); $await(Wind.Async.sleep(10)); ctx.stroke(); frontX = i; frontY = y + tempY; } for(var i = x + r; i >= x - r; i--) { var tempY = Math.sqrt(r * r - (x - i) * (x - i)); ctx.beginPath(); ctx.lineWidth = 5; ctx.moveTo(frontX, frontY); ctx.lineTo(i, y - tempY); $await(Wind.Async.sleep(10)); ctx.stroke(); frontX = i; frontY = y - tempY; } })); drawAsync().start(); }; </script> </head> <body> <canvas id='canvas' width=500 height=500 > </canvas> </body> </html>