在js中,想让线程sleep一下确实不是一件简单的事情,过多的使用定时器或者回调函数,会让复杂,凌乱,
这时,可以考虑能否使用队列来做一些简化,
而在某些场景中,队列确实像一支奇兵,可以带来不错的效果,比如配合定时器使用,可以模拟时间差效果
function createDq(){ var dq = [], size = 0; return { setDq:function(queue){ dq = queue; size = queue.length; }, queue:function(fn){ size ++; dq.push(fn); }, dqueue:function(){ size --; return dq.shift(); }, run:function(fn){ var me = this, timer; timer = setInterval(function(){ if(size <= 1){ clearInterval(timer); } fn.call(null,me.dqueue()); },30); } } }
以上是一个简单的实现,在不同的场景,可以做一些适当的变通,以做到因地制宜。
下面是一个模拟冒泡排序的动画,尝试着使用了一点点观察者模式,似乎还不错
1 function bubble(){ 2 var obs = []; 3 function compare(x, y) { 4 return x.w - y.w; 5 } 6 function swap(a, i, j) { 7 var t = a[i]; a[i] = a[j]; a[j] = t; 8 } 9 function proxy(a, i, j){ 10 notify(a[i].id + "-" + a[j].id); 11 swap.apply(null,arguments); 12 } 13 function notify(arg){ 14 obs[0].m.call(obs[0],arg); 15 } 16 return { 17 addOb:function(ob){ 18 obs.push(ob); 19 }, 20 sort:function(arr){ 21 var len = arr.length; 22 for (var x = 1; x < len; x++) { 23 for (var y = 0; y < len - x; y++) { 24 if (compare(arr[y], arr[y + 1]) > 0) { 25 proxy(arr, y, y + 1); 26 } 27 } 28 } 29 } 30 } 31 }