JS Sort animation Simulation bubble sort _javascript Skill

And in some scenes, the queue is indeed like a surprise, can bring good results, such as the use of timer, can simulate the time difference effect

Copy Code code 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, can do some appropriate flexibility to achieve local conditions.
Here's a mock bubble sort of animation, trying to use a little observer mode, which seems pretty good

Copy Code code 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);
}
}
}
}
}
}

<! 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 <= 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) + "," + rand () + "," + rand (m) +) ",//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.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); }} 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) {Pro XY (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 All SELECT Note: If the need to introduce external JS need to refresh to perform]