zoukankan      html  css  js  c++  java
  • js事件队列

      前面跟网友讨论到了JS的事件队列 ,对这个有了一些理解,事件队列我认为就是把一些不按顺序执行的事件放到队列里面,然后按照自己制定的顺序去执行,那么什么情况下会用到这个呢?我首先想到的是动画,动画是会执行一系列的操作,一连串的方法,但是后面讨论,这也只能算是函数或方法队列,事件队列应该是关联到element的触发和事件绑定。

      那么经过网友的讨论,找到这么一个例子,那就是element的事件监听,除了直接用框架(jquery dojo yui等)外,一般的监听都会是这样

    if(window.addEventListener){
        ......
    }else if(window.attachEvent){//IE8或更低
        ......
    }

      但是这里 window.attachEvent 的实现顺序跟绑定的的顺序刚好相反

    var obj = document.getElementById('test');
    obj.attachEvent('onclick',function{
      alert(1);
    });
    
    obj.attachEvent('onclick',function{
      alert(2);
    });

    这样的例子在IE8或更低的IE版本下运行,会先是弹出 2 再弹出 1 ,至于为什么,那要去问微软了。
    如果要做一个兼容的事件监听,那么就会用到队列了,队列就可以很好的控制事件的执行顺序,于是写了这么一个例子(代码很挫......) 

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>js事件队列</title>
    </head>
    <body>
    <a href="javascript:;" id="tobj">点击我1</a>
    <a href="javascript:;" id="yobj">点击我2</a>
    <script>
    var tobj = document.getElementById('tobj')
        ,ton
    ;
    if(window.addEventListener){
        ton = function(type,cb){
            tobj.addEventListener(type,cb,false);
        }
    }else if(window.attachEvent){//IE8或更低
        ton = function(type,cb){
            tobj.attachEvent('on'+type,cb);
        }
    }
    
    ton('click',function(){
        console.log(1);
    });
    
    ton('click',function(){
        console.log(2);
    });
    
    /*
    最后等到的结果是:
    IE8以及IE8以下:2   1
    IE9或更高: 1  2
    FF或chrome: 1  2
    这种情况下  为了保持能够按照 顺序执行  所以要采用队列解决
    */
    
    
    //简单队列对象
    var aqueue = function(){
        this.list = [];
        this.num = 0;//执行次数记录  防止多次监听造成的多次执行
    };
    aqueue.prototype = {
        add:function(fn){
            this.list.push(fn);
        }
        ,size:function(){
            return this.list.length;
        }
        ,done:function(elem){
            var _self = this
                ,len = _self.size()
                ,i=0
            ;
            if(_self.num===len){//如果执行次数等于事件数量
                _self.num=0;//初始化执行次数
            }else{
                for(;i<len;i++){
                    _self.list[i].call(elem);
                    _self.num++;
                }
            }
        }
    };
    
    var aq = new aqueue();
    
    var yobj = document.getElementById('yobj')
        ,yon
    ;
    
    if(window.addEventListener){
        yon = function(type,cb){
            aq.add(cb);//把事件加入队列
            yobj.addEventListener(type,function(){
                aq.done(yobj);
            },false);
        }
    }else if(window.attachEvent){//IE8或更低
        yon = function(type,cb){
            aq.add(cb);//把事件加入队列
            yobj.attachEvent('on'+type,function(){
                aq.done(yobj);
            });
        }
    }
    
    yon('click',function(){
        console.log(1);
    });
    
    yon('click',function(){
        console.log(2);
    });
    </script>
    </body>
    </html>

    这里用的是console.log 输出结果,只有在控制台才能看到,另外要注意的是用 window.attachEvent  监听,方法里面的 this 并不是指向监听对象,而是指向window。


      

  • 相关阅读:
    2016年5月27日上午(妙味课堂js基础-3笔记一(事件))
    2016年5月26日晚上(妙味课堂js基础-2笔记四(BOM))
    2016年5月26日晚上(妙味课堂js基础-2笔记三(DOM))
    2016年5月26日晚上(妙味课堂js基础-2笔记二(DOM))
    2016年5月26日下午(妙味课堂js基础-2笔记一(DOM))
    2016年5月26日下午(妙味课堂js基础-1笔记四)
    2016年5月26日下午(妙味课堂js基础-1笔记三)
    2016年5月26日上午(妙味课堂js基础-1笔记二)
    【Django】不知道为什么就是想学一下 01
    【Ubuntu】安装Java和Eclipse
  • 原文地址:https://www.cnblogs.com/subying/p/js-queue.html
Copyright © 2011-2022 走看看