js异步编程学习纪录

从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模式是一项处理异步事件的重要技术。