Heim >Web-Frontend >js-Tutorial >js 排序动画模拟冒泡排序_javascript技巧

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

WBOYOriginal: 2016-05-16 17:51:491162Durchsuche

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

 
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需刷新才能执行]

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js不完美解决click和dblclick事件冲突问题_javascript技巧Nächster Artikel：jQuery Tools Dateinput使用介绍_jquery

In Verbindung stehende Artikel

Mehr sehen

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

In Verbindung stehende Artikel

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