zoukankan      html  css  js  c++  java
  • 排序动画模拟冒泡排序

    在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         }

  • 相关阅读:
    (转)下拉刷新组合控件的制作小结
    ActivityGroup的子activity响应back事件的顺序问题
    用CSS实现竖向圆角效果的折叠菜单代码
    蓝色风格的JS+CSS个性菜单代码
    用CSS实现WinVista风格的菜单代码
    div+css+js打造的一款菜单的收缩与展开代码
    五颜六色的弹性下拉导航菜单代码
    【荐】鼠标放上弹出下拉菜单的代码
    网页顶部隐藏css菜单代码
    【教程】简单滑动门代码
  • 原文地址:https://www.cnblogs.com/occume/p/2588033.html
Copyright © 2011-2022 走看看