js事件队列

浏览数：21 / 时间：2015年06月09日

　　前面跟网友讨论到了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>