js sorting animation simulation bubble sorting_javascript skills-JS Tutorial-php.cn

js sorting animation simulation bubble sorting_javascript skills

WBOY

Release： 2016-05-16 17:51:49

Original

1140 people have browsed it

In some scenarios, the queue is indeed like a surprise force, which can bring good effects. For example, when used with a timer, it can simulate the time difference effect

Copy code The code is as follows:

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

The above is a simple implementation that can be done appropriately in different scenarios adjustments to suit local conditions.
The following is an animation simulating bubble sort. I tried to use a little bit of observer mode, and it seems pretty good

Copy code The code is as follows:

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

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]<script></script>