Javascript sort animation simulates bubble sort _ javascript skills

In js, it is really not a simple task to let the thread sleep. using too many timers or callback functions will make it complicated and messy, you can consider whether the queue can be used for some simplicity. In some scenarios, the queue is indeed like a vanguard, which can bring good results. For example, when used with a timer, the time difference effect can be simulated.

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. In different scenarios, you can make some appropriate changes to adapt to local conditions.
The following is an animation simulating Bubble sorting. It seems pretty good to try to use the observer mode with a little bit of it.

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 ){
Y (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 );
}
}
}
}
}
}

<! DOCTYPE html "> <ptml> <style> <! -- Body {margin: 0; padding: 0 ;};# mop {border: 2px solid # f40; float: left; margin-left: 300px; margin-top: 100px ;}. fac {width: 10px; height: 100px; float: left; list-style: none; position: absolute ;}. fac a {display: block;} --> </style> script <! -- 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 facs = document. getElementsByTagName ("li"), set = [], Steps = []; jOne. each (facs, function (I) {var hsb = "rgb (" + rand (0,200) + "," + rand (50,250) + "," + rand (50,200) + ")", // h = rand (50,200); set. push ({w: h, id: this. id}); jOne. setStyle (this, {height: h + "px", left: I * 10}); jOne. setStyle (this. children [0], {background: hsb, width: "10px", height: h + "px"}); var steps = {q: [], m: function () {this. q. push (arguments [0]);} var bub = bubble (); bub. addO B (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 createD Q () {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) {Policy (a [I]. id + "-" + a [j]. id); swap. apply (null, arguments);} function using Y (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], Rr [y + 1])> 0) {proxy (arr, y, y + 1) ;}}}} var jOne = {each: function (obj, callback) {var I = 0, len = obj. length; for (var value = obj [0]; I <len & callback. call (value, I, value )! = False; value = obj [++ I]) {};}, setStyle: function (elem, opt) {var o, sty = elem. style; for (var o in opt) {sty [o] = opt [o] }}function rand (a, B) {var ret = Math. random () * (B-a) + a; return ret> 0 ;} // --> script <ul id = "mop"> </ul> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]