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