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。
js事件队列的更多相关文章
- 关于js中的回调函数callback
来源于:http://www.jianshu.com/p/6bc353e5f7a3 前言 其实我一直很困惑关于js 中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制 ...
- 关于 js 中的回调函数 callback
本文写于1年前 曾经的学习文章如今拿出来分享 前言 其实我一直很困惑关于js中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制一下前人代码,功能实现了也就不再去追其原 ...
- Event Loop - 事件队列
Event Loop 定义: event - 事件 loop - 循环,既然叫事件循环,那么循环的点在哪? 循环的是一个又一个的任务队列,这些任务队列由宏任务和微任务构成 两条原则 一次处理一个任务 ...
- 关于js中的回调函数callback，通俗易懂
前言 其实我一直很困惑关于js 中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制一下前人代码,功能实现了也就不再去追其原由,这么着,这个callback的概念就越来 ...
- 浏览器中Javascript单线程分析
线程这个特性对于一门语言环境来说是尤其重要的,在Java/C++环境下都提供了多线程API操作. 但在Javascript中据说代码执行时单线程的,大量计算的逻辑会阻塞浏览器HTML渲染,但setTi ...
- Node.js EventEmitter(事件队列)
Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列. Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, 一个fs.read ...
- JavaScript之JS单线程|事件循环|事件队列|执行栈
本博文基于知乎"JavaScript作用域问题?"一问,而引起了对JavaScript事件循环和单线程等概念与实践上的研究.深入理解. 一.概念 0.关键词:JavaScript单 ...
- js 在浏览器中的event loop事件队列
目录 前言 认识一个栈两个队列 执行过程 异步任务怎么分配 简单例子 难一点的例子 前言 以下内容是js在浏览器中的事件队列执行,与在nodejs中有所区别,请注意. 都说js是单线程的,不过它本身其 ...
- 如何观察JS的事件队列的执行划分
也就是说,不同的操作函数,操作符,JS将其放入事件队列是不一样的... 比如: 外部函数和内部函数,就是分两次放入事件循环的尾端的. 比如,多个操作符组成的链式操作,也有可能是放不同的操作批次进入事件 ...
随机推荐
- MySql环境变量配置
配置环境变量 前面步骤完成后安装好MySQL,为MySQL配置环境变量.MySQL默认安装在C:\Program Files下. 1)新建MYSQL_HOME变量,并配置:C:\Program Fil ...
- docker 实例设置自动重启
yaml格式太严格了,每个冒号后面都必须带有空格在linux中./代表当前目录,属于相对路径../代表上一级目录,属于相对路径/代表根目录,/开头的文件都是绝对路径./configure的意思是执行当 ...
- SaltStack Grains 详解
简介 Grains 是SaltStack 的重要组件之一.主要记录minion的静态信息,比如CPU,内存,磁盘,网络信息等.Grains信息是minion启动时汇报给Master的. 刷新grain ...
- 图的最小生成树的理解和实现：Prim和Kruskal算法
最小生成树 一个连通图的生成树是一个极小的连通子图,它含有图中所有的顶点,但只有足以构成一棵树的n-1条边.我们将构造连通网的最小代价生成树称为最小生成树(Minimum Cost Spanning ...
- C 语言调试信息输出宏定义
C 语言经常在实际的调试过程中,使用最基本的调试方法printf,我们可以使用__FILENAME__.__FUNCTION__.__LINE__,增加自己的输出宏定义: #define DVR_PR ...
- 我也学习JAVA多线程-join
在工作中,挺少遇到join关键字,但很多多线程资料和面试过程中,初中级开发工程师总会遇到join. 今天一起学习下join. join的作用:等待指定的时间(当为0时,一直等待),直到这个线程执行结束 ...
- Service Discovery protocol(SDP)
locating services provided by Volume 3 , Part C , section 8 2.1sdp client-server architecture 2.2 se ...
- 使用nginx反向代理jenkins
1.在Jenkins 官方网站(http://jenkins-ci.org/)下载最新版本war包.拷贝到 $TOMCAT_HOME/webapps 下(不用解压).启动tomcat服务. 2.找到n ...
- PHP 对字符串 进行填充
1.str_pad — 使用另一个字符串填充字符串为指定长度 . 我觉得str_pad可以满足普通的数字,字符串的简单填充. string str_pad ( string $input , int ...
- Json＆XML比较
1.定义 1.1 XML定义 扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用 ...