JavaScript 异步编程学习笔记

JavaScript 的异步编程

本内容为学习笔记

详情请见 阮一峰的网络日志： http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html

1、JavaScript 执行模式：同步 和 异步；

1.1、同步

1.1.1、优缺点

优点：因为单线程，实现起来简单；

缺点：执行效率低；

1.1.2、解决方案

为了解决 js 同步编程的缺点，提出了“异步编程”的解决方案。

JavaScript 异步编程的4种方法：

Method1: 回调函数

同步情景：

f1();

f2();

说明：在f1返回结果之前，f2没有执行（类似于接力赛中，被交接人在等待上一棒到达接力点时初速度为0）；

改写成异步 =>：

function f1(callback) {

setTimeOut (function () {

// f1的任务代码

callbak();

})

}

f1(f2);

说明：在f1返回结果之前，f2函数已经开始执行，只是在等待f1的返回结果（类似于接力赛中，被交接人在等待上一棒到达前就已经跟跑，到达接力点（交接棒的时候）时初速度不为0）；

注意：

1、异步和回调函数没有必然的联系，同步中也可以使用回调函数，但是意义不大，一般人不会这么写；

2、回调函数只是异步编程实现的一种方式罢了；

Method2: 事件监听(事件驱动模式)

A.实现

f1 绑定 f2 事件： f1.on('done', f2);

f1改写：

function f1() {

setTiemOut(function () {

// f1的任务代码

f1.trigger('done');

}, 1000);

}

说明：当 f1 任务完成后，立即触发绑定事件；

B.与M1方法的区别

M2方法可以绑定多个事件；

Method3:发布/订阅（发布订阅模式/观察者模式）

A.模式介绍

假定存在一个“信号中心”，人们发信号时，都往信号中心发布，人们接收信号时，都要向信号中心订阅想要的信号才能接收该信号；

B.与Method2方法的区别：

M2方法相当于网购中的没有中间商（类似淘宝）,直接商家和客户；

M3方法中的“信号中心”相当于一个容器或者平台，商家 <--> 平台 <--> 客户；

C.使用jQuery 插件实现

f2 首先订阅done“信号”： jQuery.subscribe('done', f2);

f1 执行完任务后，发布done“信号”：

function f1() {

setTiemOut(function () {

// f1的任务代码

jQuery.publish('done');

}, 1000);

}

Method4:Promise 对象（推荐使用）

需单独学习详情参考：

廖雪峰的官网网站： https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000

阮一峰的网络日志：ES6 入门（第三版）中 Promise 的介绍

1.2、异步

优点：执行效率高；

缺点：执行顺序不好控制；