Home >Web Front-end >JS Tutorial >js sorting animation simulation bubble sorting_javascript skills

js sorting animation simulation bubble sorting_javascript skills

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

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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js imperfectly solves the conflict between click and dblclick events_javascript skillsNext article：js imperfectly solves the conflict between click and dblclick events_javascript skills

See more

js sorting animation simulation bubble sorting_javascript skills

Related articles