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。


  

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。