JS基础——异步回调

前言

一个刚入前端的小菜，虽然以前看到过关于回调的文章，但是呢，理解起来有点费劲啊。当时的脑海里就一个概念。

回调：大多出现在Ajax请求，用于处理收到的请求结果。

嘿嘿，当时真的就是这一个想法啊。现在真的入这行，而且这个概念也非常重要，用的地方太多太多，是时候把它捡起来好好理解一番。

当然，本文适合菜鸟，因为我是以一个菜鸟的思维去理解的。

回调概念

理解一个新东西，很有必须去理解下它的概念，因为这是最简洁明了，前人总结的。

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

中文意思：回调是一个函数被作为一个参数传递到另一个函数里，在那个函数执行完后再执行。
有点绕，好，咱们说大白话。就是 B函数被作为参数传递到A函数里，在A函数执行完后再执行B。

下面咱们看看代码怎么实现回调。

function A(callback){
    console.log("I am A");
    callback();  //调用该函数
}

function B(){
   console.log("I am B");
}

A(B);

这应该是最最简单的回调了，我想大家应该明白回调的释义了吧。
当然，这么简单的同步回调代码是不会用的，现实中用都是相对比较复杂带传参。

回调函数和异步

一开始我被​​回调​​​和​​异步​​​有点搞晕了。还以为回调就一定是异步的呢。
其实不然，相信上面的A,B函数的例子我们已经明白，回调并不一定就是异步。他们自己并没有直接关系。

下面我们可以理解下 ​​同步回调​​​和​​异步回调​​（同步异步我就不单独讲了，概念很简单）。

同步回调

就是上面的​​A B​​函数例子，它们就是同步的回调。

异步回调

因为js是单线程的，但是有很多情况的执行步骤（ajax请求远程数据，IO等）是非常耗时的，如果一直单线程的堵塞下去会导致程序的等待时间过长页面失去响应，影响用户体验了。

如何去解决这个问题呢，我们可以这么想。耗时的我们都扔给异步去做，做好了再通知下我们做完了，我们拿到数据继续往下走。

var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);   //第三个参数决定是否采用异步的方式
    xhr.send(data);
    xhr.onreadystatechange = function(){
        if(xhr.readystate === 4 && xhr.status === 200){
                ///xxxx
        }
    }

上面是一个代码，浏览器在发起一个​​ajax​​​请求，会单开一个线程去发起http请求，这样的话就能把这个耗时的过程单独去自己跑了，在这个线程的请求过程中，​​readystate​​​ 的值会有个变化的过程，每一次变化就触发一次​​onreadystatechange​​ 函数，进行判断是否正确拿到返回结果。

image.png

异步编程的实现

就我目前知道两种 ​​回调函数​​​ 和 ​​事件监听​​​ ，其实看了阮神的 ​​异步编程的文章​​ 和下面的评论之后得出的理解。下面咱们就看看这两种异步编程的方式吧。

回调函数

假定有三个函数

f1()

f2()

f3()

但是，​​f1​​​执行很耗时，而 ​​f2​​​需要在​​f1​​​执行完之后执行。
为了不影响 ​​​f3​​​的执行，我们可以把​​f2​​​写成​​f1​​的回调函数。

//最原始的写法-同步写法

f1(); //耗时很长，严重堵塞
f2(); 
f3(); //导致f3执行受到影响

//改进版-异步写法
function f1(callback){
　　setTimeout(function () {
　　　　// f1的任务代码
　　　　callback();
　　}, 1000);
}

f1(f2); //

f3();

上面的写法是利用 ​​setTimeOut​​​把​​f1​​​的逻辑包括起来，实现​​javascript​​​中的异步编程。这样的话，f1异步了，不再堵塞​​f3​​​的执行。
顺道说下，js是单线程的，这里所谓的异步也是伪异步，并不是开了多线程的异步。它是什么原理呢，其实是任务栈，​​​setTimeOut​​​方法的原理是根据后面的定时时间，过了这个定时时间后，将​​f1​​加入任务栈，注意仅仅是加入任务栈，并不是放进去就执行，而是根据任务栈里的任务数量来确定的。

事件监听

这里我直接用阮神的例子，通过事件触发操作，就是类似于咱们点击事件里的处理逻辑。

同样​​f1 , f2​​两个函数。

f1()

f2()

​​f1​​​我们给它加一个事件,事件触发 ​​f2​​ 函数。

function f1(){
   setTimeOut(function(){
        f1.trigger('click');
    })
}

f1.on('click' , f2);

另外多说点，这上面的两种方式都是 ​​js​​​ 中的伪异步，而 ​​ajax​​的异步是底层多线程函数异步。

写在最后

由于时间问题，后续的理解会再补上，再理理思路。另外如果有错误，也请各位前辈给予指正，感激不尽。

"异步模式"编程的4种方法，理解它们可以让你写出结构更合理、性能更出色、维护更方便的Javascript程序。

一、回调函数

这是异步编程最基本的方法。

假定有两个函数f1和f2，后者等待前者的执行结果。

f1();

f2();

如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函数。

function f1(callback){

setTimeout(function () {

// f1的任务代码

callback();

}, 1000);

}

执行代码就变成下面这样：

f1(f2);

采用这种方式，我们把同步操作变成了异步操作，f1不会堵塞程序运行，相当于先执行程序的主要逻辑，将耗时的操作推迟执行。

回调函数的优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度​​耦合​​（Coupling），流程会很混乱，而且每个任务只能指定一个回调函数。

二、事件监听

另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。

还是以f1和f2为例。首先，为f1绑定一个事件（这里采用的jQuery的​​写法​​）。

f1.on('done', f2);

上面这行代码的意思是，当f1发生done事件，就执行f2。然后，对f1进行改写：

function f1(){

setTimeout(function () {

// f1的任务代码

f1.trigger('done');

}, 1000);

}

f1.trigger('done')表示，执行完成后，立即触发done事件，从而开始执行f2。

这种方法的优点是比较容易理解，可以绑定多个事件，每个事件可以指定多个回调函数，而且可以​​"去耦合"​​​（Decoupling），有利于实现​​模块化​​。缺点是整个程序都要变成事件驱动型，运行流程会变得很不清晰。

三、发布/订阅

上一节的"事件"，完全可以理解成"信号"。

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

这个模式有多种​​实现​​​，下面采用的是Ben Alman的​​Tiny Pub/Sub​​，这是jQuery的一个插件。

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

jQuery.subscribe("done", f2);

然后，f1进行如下改写：

function f1(){

setTimeout(function () {

// f1的任务代码

jQuery.publish("done");

}, 1000);

}

jQuery.publish("done")的意思是，f1执行完成后，向"信号中心"jQuery发布"done"信号，从而引发f2的执行。

此外，f2完成执行后，也可以取消订阅（unsubscribe）。

jQuery.unsubscribe("done", f2);

这种方法的性质与"事件监听"类似，但是明显优于后者。因为我们可以通过查看"消息中心"，了解存在多少信号、每个信号有多少订阅者，从而监控程序的运行。

四、Promises对象

Promises对象是CommonJS工作组提出的一种规范，目的是为异步编程提供​​统一接口​​。

简单说，它的思想是，每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。比如，f1的回调函数f2,可以写成：

f1().then(f2);

f1要进行如下改写（这里使用的是jQuery的​​实现​​）：

function f1(){

var dfd = $.Deferred();

setTimeout(function () {

// f1的任务代码

dfd.resolve();

}, 500);

return dfd.promise;

}

这样写的优点在于，回调函数变成了链式写法，程序的流程可以看得很清楚，而且有一整套的​​配套方法​​，可以实现许多强大的功能。

比如，指定多个回调函数：

f1().then(f2).then(f3);

再比如，指定发生错误时的回调函数：

f1().then(f2).fail(f3);

而且，它还有一个前面三种方法都没有的好处：如果一个任务已经完成，再添加回调函数，该回调函数会立即执行。所以，你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解，都相对比较难。

五、参考链接

* ​​Asynchronous JS: Callbacks, Listeners, Control Flow Libs and Promises​​