js 排序動畫模擬冒泡排序

更新時(shí)間：2012年07月16日 00:27:54 作者：

在js中，想讓線程sleep一下確實(shí)不是一件簡單的事情，過多的使用定時(shí)器或者回調(diào)函數(shù)，會讓復(fù)雜，凌亂，這時(shí)，可以考慮能否使用隊(duì)列來做一些簡

而在某些場景中，隊(duì)列確實(shí)像一支奇兵，可以帶來不錯(cuò)的效果，比如配合定時(shí)器使用，可以模擬時(shí)間差效果

 
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); 
} 
} 
} 

以上是一個(gè)簡單的實(shí)現(xiàn)，在不同的場景，可以做一些適當(dāng)?shù)淖兺?，以做到因地制宜?
下面是一個(gè)模擬冒泡排序的動畫，嘗試著使用了一點(diǎn)點(diǎn)觀察者模式，似乎還不錯(cuò)

復(fù)制代碼代碼如下:

 
function bubble(){ 
var obs = []; 
function compare(x, y) { 
return x.w - y.w; 
} 
function swap(a, i, j) { 
var t = a[i]; a[i] = a[j]; a[j] = t; 
} 
function proxy(a, i, j){ 
notify(a[i].id + "-" + a[j].id); 
swap.apply(null,arguments); 
} 
function notify(arg){ 
obs[0].m.call(obs[0],arg); 
} 
return { 
addOb:function(ob){ 
obs.push(ob); 
}, 
sort:function(arr){ 
var len = arr.length; 
for (var x = 1; x < len; x++) { 
for (var y = 0; y < len - x; y++) { 
if (compare(arr[y], arr[y + 1]) > 0) { 
proxy(arr, y, y + 1); 
} 
} 
} 
} 
} 
} 

<!DOCTYPE html"> <html> <style></style> <script></script> <ul id="mop"></ul> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: