JavaScript异步

Posted by luoway on October 17, 2015

异步与同步

Javascript异步编程的4种方法

Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous)。

“同步模式”就是上一段的模式,后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的、同步的;
“异步模式”则完全不同,每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

举两个例子:
1.同步编程

function Add(a, b) { return a+b; }
var c = Add(1, 2);

执行完上一句后,c的值为3,毫无疑问。

2.异步编程

var c;
function AsynAdd(a, b){
	setTimeout(function () {
		c= a+b;
		alert(c);
	}, 1000);
}
AsynAdd(1, 2);
alert(c);

执行完上一句后,c的值为undefined,在大约1秒钟后,setTimeOut将会执行,从这往后,c的值才是3。
可以看出加法运算的结果在调用完后并不立即可用,而是需要延迟一段时间才能得到。

需要注意的是,从例2中可以发现setTimeOut延迟等待的过程中,后续js会继续执行。
因此,当for循环中使用setTimeOut时,由于异步的存在,循环体与setTimeOut函数体的执行不符合同步的逻辑。类似的问题在应用中需要注意。

异步编程的方法

1.setTimeOut(function(){}, millisec)

setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。

2.事件监听

在指定的事件发生后调用函数或计算表达式。如:onclick, onblur。

3.发布/订阅、观察者模式

这是事件监听的高级抽象。

订阅-发布模式

我们常用的事件监听往往是一对一或一对多的形式(dom.onclick=function(){}的形式只能绑定一个事件处理函数,属于一对一)
而订阅-发布模式要求支持多对多的形式,因此需要抽象一个对象,同时面向发布者和订阅者,发布者和订阅者通过约定的数据结构进行通信

学习笔记-js发布/订阅模式的简单实现中指出发布/订阅、观察者模式的不同:

Observer模式要求希望接收到主题通知者的观察者必须订阅内容改变的事件。
Subscribe/Publish模式使用了一个主题/事件通道,这个通道介于订阅者和发布者之间。该事件系统允许代码定义应用程序的特定事件,该事件可以传递自定义参数,自定义参数包含订阅者所需要的值。其目的是避免订阅者和发布者产生依赖关系。

发布者和订阅者是解耦的。

4.Promises对象

它的思想是,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。

几个遵循Promises/A规范的类库:when.js,q.js,jQuery.Deferred。

优势

JavaScript作为常用于浏览器客户端的语言,它经常需要解决许多并行的事件,由于Javascript语言的执行环境是”单线程”(single thread),只能串行处理事件。异步是JavaScript模拟并行最有效的方案。

所谓”单线程”,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。

理解JavaScript异步编程,可以为理解 AJAX(异步的 JavaScript 和 XML)做好准备。