标签：
太棒的Windjs体验！写一个冒泡过程的展示，how？
先写个冒泡排序，坑爹的是我居然不会写...用惯了stl的今天连个冒泡都不会了也是醉了，写了蛮久居然发现写出来的是选择排序...纠结了蛮久还是给拼出来了...
but排序和画圆一样，都是一瞬间的事情，完全看不清中间bubble的过程。
怎么破 
再次祭出大杀器Windjs！from my point of view，Windjs就是能使得“线程”挂起的东西，跟vbs的sleep函数异曲同工；“挂起”后，不再执行任何js代码。按照老赵的话来说:"
在大部分平台上编写这样的程序并没有太大困难，只要在绘制出图形之后短暂地阻塞线程就行了。可惜，在JavaScript中我们只能“一蹴而就”，要暂停的话，只能使用setTimeout进行回调了。不过，这也正是Jscex的用武之地，用Jscex编写的代码需要“暂停”，只需要简单地调用sleep异步方法，一切都很直接。"
其实用setTimeout进行回调也是可以的，不过第二个参数的时间需要累积，很麻烦，不优雅，而for的继续执行会使代码出现各种坑爹结果...
so 如果想要用html5做动画或者特效，Windjs真的是个很好的辅助工具~
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="stylesheet" href="reset.css"> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title> </title> 7 <script src="jquery.js"></script> 8 <script src="wind-all-0.7.3.js"></script> 9 <style> 10 span {border:1px solid red; width:40px; height:40px; position: absolute; text-align: center; line-height:40px} 11 </style> 12 <script> 13 window.onload = function() { 14 var run = eval(Wind.compile(‘async‘, function() { 15 var from = []; 16 var list = document.getElementsByTagName(‘span‘); 17 for(var i = 0; i < list.length; i++) { 18 list[i].style.left = 50 * i + ‘px‘; 19 from[i] = i; 20 } 21 22 for(var i = 9; i >= 1; i--) 23 for(var j = 0; j < i; j++) { 24 var x = list[from[j]].innerHTML; 25 var y = list[from[j + 1]].innerHTML; 26 if(x > y) { 27 $(‘span‘).eq(from[j]).animate({left:‘+=50px‘}); 28 $(‘span‘).eq(from[j + 1]).animate({left:‘-=50px‘}); 29 $await(Wind.Async.sleep(1000)); 30 var temp = from[j]; 31 from[j] = from[j + 1]; 32 from[j + 1] = temp; 33 } else { 34 $(‘span‘).eq(from[j]).css(‘borderColor‘, ‘green‘); 35 $(‘span‘).eq(from[j + 1]).css(‘borderColor‘, ‘green‘); 36 $await(Wind.Async.sleep(1000)); 37 $(‘span‘).eq(from[j]).css(‘borderColor‘, ‘red‘); 38 $(‘span‘).eq(from[j + 1]).css(‘borderColor‘, ‘red‘); 39 $await(Wind.Async.sleep(1000)); 40 } 41 } 42 })); 43 44 run().start(); 45 }; 46 </script> 47 </head> 48 <body> 49 <span>9</span> 50 <span>1</span> 51 <span>3</span> 52 <span>6</span> 53 <span>4</span> 54 <span>5</span> 55 <span>2</span> 56 <span>8</span> 57 <span>7</span> 58 <span>0</span> 59 </body> 60 </html>
标签：
原文地址：http://www.cnblogs.com/zichi/p/4220554.html
