排序动画模拟冒泡排序

在js中，想让线程sleep一下确实不是一件简单的事情，过多的使用定时器或者回调函数，会让复杂，凌乱，

这时，可以考虑能否使用队列来做一些简化，

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

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

以上是一个简单的实现，在不同的场景，可以做一些适当的变通，以做到因地制宜。

下面是一个模拟冒泡排序的动画，尝试着使用了一点点观察者模式，似乎还不错

 1 function bubble(){
 2             var obs = [];
 3             function compare(x, y) {
 4                 return x.w - y.w; 
 5             }
 6             function swap(a, i, j) {
 7                 var t = a[i]; a[i] = a[j]; a[j] = t;
 8             }
 9             function proxy(a, i, j){
10                 notify(a[i].id + "-" + a[j].id);
11                 swap.apply(null,arguments);
12             }
13             function notify(arg){
14                 obs[0].m.call(obs[0],arg);
15             }
16             return {
17                 addOb:function(ob){
18                     obs.push(ob);
19                 },
20                 sort:function(arr){
21                     var len = arr.length;
22                     for (var x = 1; x < len; x++) {
23                         for (var y = 0; y < len - x; y++) {
24                             if (compare(arr[y], arr[y + 1]) > 0) {
25                                 proxy(arr, y, y + 1);
26                             }
27                         }
28                     }
29                 }
30             }
31         }

<!DOCTYPE html"> <html> <style></style> <script></script> <ul id="mop"></ul> </html>