Maison > Article > interface Web > js 排序动画模拟冒泡排序_javascript技巧

js 排序动画模拟冒泡排序_javascript技巧

WBOYoriginal: 2016-05-16 17:51:491143parcourir

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

 
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 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 for (var y = 0; y if (compare(arr[y], arr[y + 1]) > 0) { 
proxy(arr, y, y + 1); 
} 
} 
} 
} 
} 
} 

window.onload = function(){ 
var mop = document.getElementById("mop"),frag = document.createDocumentFragment(); 
(function(){ 
var li , a; 
for(var i = 1; i <= 50; i++){ 
li = document.createElement("li"); 
li.className = "fac"; 
li.id = "f" + i; 
a = document.createElement("a"); 
li.appendChild(a); 
frag.appendChild( li ); 
} 
mop.appendChild(frag); 
})();

var steps = { 
q:[], 
m:function(){ 
this.q.push(arguments[0]); 
} 
} 
var bub = bubble(); 
bub.addOb(steps); 
bub.sort(set);

var dq = createDq(); 
dq.setDq(steps.q); 
dq.run(function(){ 
var ids = arguments[0].split(/-/); 
var elem1 = document.getElementById( ids[0] ), elem2 = document.getElementById( ids[1] ) ,old;

old = elem1.removeChild(elem1.children[0]); 
elem1.appendChild(elem2.removeChild(elem2.children[0])); 
elem2.appendChild(old); 
elem1.id = ids[1]; 
elem2.id = ids[0]; 
});

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

//--></script> 
<ul id="mop"></ul>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：js不完美解决click和dblclick事件冲突问题_javascript技巧Article suivant：jQuery Tools Dateinput使用介绍_jquery

Articles Liés

Voir plus

js 排序动画模拟 冒泡排序_javascript技巧

Articles Liés

js 排序动画模拟冒泡排序_javascript技巧