从setTimeout开始
一个很有趣的例子:
1 for (var i = 1; i <= 3; i++) {
2 setTimeout(function(){ console.log(i); }, 0);
3 };
一开始看这段代码时,对于初学者,往往会以为输出的应该是
1 1
2 2
3 3
包括我自己也这样以为。
但当自己动手测试的时候,发现结果为
1 4
2 4
3 4
其实这就是js的setTimeout调用机制,先将其调用的函数加入事件队列中,然后在代码执行完后,到事件队列中去依次调用。
玩转自己的PubSub
PubSub模式即发布订阅模式,在jquery中,bind/on函数就使用的该模式。 意为将元素的事件发布给任何订阅此事件的人。
实现方法
对于支持的每种事件类型,唯一需要存储的状态值就 是一个事件处理器清单
PubSub = {handlers: {}}
需要添加事件监听器时,只要将监听器推入数组末尾即可(这意味着 总是会按照添加监听器的次序来调用监听器)。
1 PubSub.on = function(eventType, handler) {
2 if (!(eventType in this.handlers)) {
3 this.handlers[eventType] = [];
4 }
5 this.handlers[eventType].push(handler);
6 return this;
7 }
接着,等到触发事件的时候,再循环遍历所有的事件处理器。
1 PubSub.emit = function(eventType) {
2 var handlerArgs = Array.prototype.slice.call(arguments, 1);
3 for (var i = 0; i < this.handlers[eventType].length; i++) {
4 this.handlers[eventType][i].apply(this, handlerArgs);
5 }
6 return this;
7 }
总结
PubSub模式是一项处理异步事件的重要技术。