一:异步的概念

  1. 异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念。<br /> 在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行)。而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系。<br /> 简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。

二:什么时候用异步

  1. 在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。在服务器端,"异步模式"甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有http请求,服务器性能会急剧下降,很快就会失去响应。接

三:异步编程几种方法

1:回调函数

初始示例:假设有两个函数, f1 和 f2,f1 是一个需要一定时间的函数。

  1. function f1() {
  2. setTimeout(function(){
  3. console.log('先执行 f1')
  4. },1000)
  5. }
  6. function f2() {
  7. console.log('再执行 f2')
  8. }
  1. 因为 f1 是一个需要一定时间的函数,所以可以将 f2 写成 f1 的回调函数,将同步操作变成异步操作,f1 不会阻塞程序的运行,f2 也无需空空等待,例如 JQuery ajax
  1. function f1(f2){
  2. setTimeout(function(){
  3. console.log('先执行 f1')
  4. },1000)
  5. f2()
  6. }
  7. function f2() {
  8. console.log('再执行 f2')
  9. }
  1. 但是回调函数有一个致命的弱点,就是容易写出**回调地狱(Callback hell)**。<br /> 回调函数的优点是简单、容易理解和实现,缺点是不利于代码的阅读和维护,各个部分之间高度耦合,使得程序结构混乱、流程难以追踪(尤其是多个回调函数嵌套的情况),而且每个任务只能指定一个回调函数。此外它不能使用 try catch 捕获错误,不能直接 return

2:事件监听

  1. 这种方式下,**异步任务的执行不取决于代码的顺序,而取决于某个事件是否发生**。 <br /> 下面是两个函数f1f2,编程的意图是f2必须等到f1执行完成,才能执行。首先,为f1绑定一个事件(这里采用的jQuery的写法)
  1. f1.on('done', f2);
  1. 上面这行代码的意思是,当f1发生done事件,就执行f2。然后,对f1进行改写:
  1. function f1() {
  2. setTimeout(function () {
  3. // ...
  4. f1.trigger('done');
  5. }, 1000);
  6. }
  1. 上面代码中,f1.trigger(‘done’)表示,执行完成后,立即触发done事件,从而开始执行f2 <br /> 这种方法的优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以"去耦合",有利于实现模块化。缺点是整个程序都要变成事件驱动型,运行流程会变得很不清晰。阅读代码的时候,很难看出主流程。

3:发布订阅

我们假定,存在一个”信号中心”,某个任务执行完成,就向信号中心”发布”(publish)一个信号,其他任务可以向信号中心”订阅”(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做”发布/订阅模式”(publish-subscribe pattern),又称”观察者模式”(observer pattern)。

首先,f2向信号中心jQuery订阅done信号。

  1. jQuery.subscribe('done', f2);

然后,f1进行如下改写:

  1. function f1() {
  2. setTimeout(function () {
  3. // ...
  4. jQuery.publish('done');
  5. }, 1000);
  6. }
  1. 上面代码中,jQuery.publish(‘done’)的意思是,f1执行完成后,向信号中心jQuery发布done信号,从而引发f2的执行。<br /> f2完成执行后,可以取消订阅(unsubscribe)。
  1. jQuery.unsubscribe('done', f2);
  1. 这种方法的性质与“事件监听”类似,但是明显优于后者。因为可以通过查看“消息中心”,了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。

4:Promise

单独介绍

5:async/await

单独介绍