- 背景:JavaScript的执行环境是 单线程
一次只能完成一件任务。如果有多个任务,必须排队执行
- 单线程优点:实现起来简单,执行环境单纯
- 单线程缺点:某个任务耗时很长时,后面的任务必须等待,这样会影响整个整个程序的执行时间。
(eg:浏览器无响应(假死),往往是因为某一段JavaScript代码长时间运行(如死循环),导致卡在这个地方, 其它任务无法执行)
- 解决方案:将任务的执行模式分为两种:同步(Synchronous)和异步(Asynchronous)
同步模式:前一个任务结束后才执行后一个任务,程序的执行顺序和任务的排列顺序是一致的、同步的
异步模式:每个任务有一个或多个回掉函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务不必等前一个任务结束才能执行。所以程序的执行顺序和任务的排列顺序是不一致的、异步的
异步模式编程的4种方法:
- 回调函数
异步编程最基本的方法
现有两个函数f1和f2,后者等待前者的执行结果
function f1(callback){
setTimeout(function(){
//f1的任务代码
console.log('f1')
callback();
},1000)}function f2(){ console.log('f2')}//执行f1(f2)
采用这种方式把同步操作变成了异步操作,f1不会堵塞程序运行,相当于先执行程序的主要逻辑,将耗时的操作推迟执行。
优点:简单、容易理解和部署
缺点:各部分高度耦合,流程会很混乱,不利于代码阅读和维护,而且每个任务只能指定一个回调函数
2.事件监听
事件驱动模式。任务的执行不取决于代码的顺序,而取决于某个事件是否发生。
以f1和f2为例。 首先为f1绑定一个事件
f1.on("done",f2);
当f1发生done时间,就执行f2. 然后改写f1
function f1(){
setTimeout(function(){
//f1的任务代码
f1.trigger("done")
})
}
f1.trigger("done")表示,执行完成后,立即触发done事件,从而开始执行f2.
优点:便于理解;可绑定多个事件,每个事件可指定多个回调函数;可以去耦合,有利于实现模块化;
缺点:整个程序都要变成事件驱动型,运行流程会变的不清晰。
3.发布/订阅
方法2中的 “事件” 可以理解成“信号”。
发布/订阅模式:又称观察者模式。假定存在一个“信号中心”,某个任务执行完成,就向信号中心“发布”(publish)一个信号,其它任务可以向订阅中心订阅(subscribe)这个信号,从而知道何时可以执行。
采用Ben Alman 的Tiny Pun/Sub 的实现方式
首先,f2向“信号中心”Jquery订阅 "done" 信号
Jquery.subscribe("done",f2)
f1如下:
function f1(){
setTimeout(function(){
//f1的任务代码
Jquery.publish("done")
})
}
Jquery.publishj("done")的意思是,f1执行完成后,向“信号中心”Jquery发布“done”信号,从而引发f2的执行
f2完成执行后,也可以取消订阅(unsubscribe)
Jquery.unsubscribe("done",f2)
优点:类似但胜于“事件监听”,因为可以通过查看“消息中心”,了解存在多少信号、每个信号的订阅者,从而监控程序的运行
4.Promises对象
Promises对象目的是为异步编程提供统一接口
Promise思想:每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数,如f1的回调函数f2可以写成:
f1().then(f2);
f1需改写如下:
function f1(){
var dfd = $.Deferred();
setTimeout(function(){
//f1的任务代码
dfd.resolve()
},500)
return dfd.promise;
}
优点:回调函数变成了 链式写法,程序的流程可以看的很清楚,而且有一整套的配套方法,可以实现许多强大的功能,如:指定多个回调函数;指定发生错误时的回调函数
f1.then(f2).then(f3)
f1.then(f2).fail(f3)
另外:它具备前三种方法不具备的优点:如果一个任务已经完成,再添加回调函数,该回调函数会立即执行。所以不必担心是否错过了某个事件或信号。