js 排序动画模拟冒泡排序

307 阅读 0 评论 203 点赞

我是靠谱客的博主欣慰康乃馨，最近开发中收集的这篇文章主要介绍js 排序动画模拟冒泡排序，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

而在某些场景中，队列确实像一支奇兵，可以带来不错的效果，比如配合定时器使用，可以模拟时间差效果

复制代码代码如下:

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

以上是一个简单的实现，在不同的场景，可以做一些适当的变通，以做到因地制宜。
下面是一个模拟冒泡排序的动画，尝试着使用了一点点观察者模式，似乎还不错

复制代码代码如下:

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