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

　　

js事件队列的更多相关文章

  1. 关于js中的回调函数callback

    来源于:http://www.jianshu.com/p/6bc353e5f7a3 前言 其实我一直很困惑关于js 中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制 ...

  2. 关于 js 中的回调函数 callback

    本文写于1年前 曾经的学习文章如今拿出来分享 前言 其实我一直很困惑关于js中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制一下前人代码,功能实现了也就不再去追其原 ...

  3. Event Loop - 事件队列

    Event Loop 定义: event - 事件 loop - 循环,既然叫事件循环,那么循环的点在哪? 循环的是一个又一个的任务队列,这些任务队列由宏任务和微任务构成 两条原则 一次处理一个任务 ...

  4. 关于js中的回调函数callback，通俗易懂

    前言 其实我一直很困惑关于js 中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制一下前人代码,功能实现了也就不再去追其原由,这么着,这个callback的概念就越来 ...

  5. 浏览器中Javascript单线程分析

    线程这个特性对于一门语言环境来说是尤其重要的,在Java/C++环境下都提供了多线程API操作. 但在Javascript中据说代码执行时单线程的,大量计算的逻辑会阻塞浏览器HTML渲染,但setTi ...

  6. Node.js EventEmitter(事件队列)

    Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列. Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, 一个fs.read ...

  7. JavaScript之JS单线程|事件循环|事件队列|执行栈

    本博文基于知乎"JavaScript作用域问题?"一问,而引起了对JavaScript事件循环和单线程等概念与实践上的研究.深入理解. 一.概念 0.关键词:JavaScript单 ...

  8. js 在浏览器中的event loop事件队列

    目录 前言 认识一个栈两个队列 执行过程 异步任务怎么分配 简单例子 难一点的例子 前言 以下内容是js在浏览器中的事件队列执行,与在nodejs中有所区别,请注意. 都说js是单线程的,不过它本身其 ...

  9. 如何观察JS的事件队列的执行划分

    也就是说,不同的操作函数,操作符,JS将其放入事件队列是不一样的... 比如: 外部函数和内部函数,就是分两次放入事件循环的尾端的. 比如,多个操作符组成的链式操作,也有可能是放不同的操作批次进入事件 ...

随机推荐

  1. Android中LayoutParams的用法

    简单说说 自己对 android LayoutParams的理解吧,xh写不出高级文章是低级写手.public static classViewGroup.LayoutParamsextends Ob ...

  2. FlowPortal-BPM——创建新组织架构、表单、流程

    一.创建新组织架构 (1)管理流程→组织管理→组织架构添加需要的组织架构→新建新成员或角色 (2)设置成员信息 二.创建新数据源(如果在已有的数据库中操作,只需要添加需要的表) (1)添加新数据库并添 ...

  3. Github概念理解备忘录

    总结: add就是用来建立跟踪,添加文件到缓存区: commit就是把文件缓存区的文件正式加到本地库中: push就是把本地库更新到远程库中: git命令的操作要在仓库所在目录下进行才有效: 在Git ...

  4. json兼容ie8

    今天遇到一个问题,后台传递过来的json对象,在前端解析的时候用JSON.parse(result)方法不好使,查了一下是因为ie浏览器的问题.然后在网上翻了翻,找到了这个办法,可以使这个函数在ie中 ...

  5. Fleury算法

    关于为什么不选桥 因为选桥之后会变成两个联通分支,这时由于可能产生的新联通分支不是孤立顶点,他俩都不联通了,那么也就绝对不可能“一笔画”走下来了 关于为什么可以选除桥之外的任意一条边走 本质原因是因为 ...

  6. python怎么解决用matplotlib画图时无法显示中文的问题或者出现方框的问题

    在中文前面加上u 加上u以后如果还不可以显示中文显示了方框 就直接加上 from pylab import mpl mpl.rcParams['font.sans-serif']=['SimHei']

  7. Mac 10.12安装SVN工具SmartSVM 7.6

    说明:SVN工具没有最好的,只有用的最顺手的. 下载: (链接: https://pan.baidu.com/s/1dFGqEsT 密码: uyjx)

  8. 16个最佳响应式HTML5框架分享

    HTML5框架可以快速构建响应式网站,它们帮助程序员减少编码工作,减少冗余的代码.如今有很多免费的HTML5框架可供使用,由于它们有着响应式设计.跨浏览器兼容.相对轻量级等特点,这些框架在开发中都十分 ...

  9. (转)zabbix3.4使用percona-monitoring-plugins监控mysql

    原文:https://blog.csdn.net/yanggd1987/article/details/79656771 简介 之前主要使用nagios监控mysql,本文主要介绍使用percona- ...

  10. WebStorm 快键键

    ctrl+/ 单行注释ctrl+shift+/ 块注释ctrl+shift+ +/- 展开/折叠ctrl+alt+L 格式化代码ctrl+shift+ up/down 上下移动句子 Alt+回车 导入 ...