JS基础-----异步回调

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

实际的概念是：一个函数被作为一个参数传递到另一个函数里，在那个函数执行完后再执行。大白话就是：函数B被作为参数传递到函数A里面，在函数A执行完后就执行函数B。

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

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

A(B);

异步回调例子：js是单线程的。很多情况下异步步骤很耗时，一直单线程下去会很耗时，页面等待时间很长失去相应，影响用户体验。

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

浏览器单开一个线程去发起http请求，ready state的会有个变化的过程，每一次变化就触发一次onreadystatechange函数，进行判断是否正确返回拿到结果。

异步编程的实现

两种 回调函数 和 事件监听

回调函数

假定有三个函数

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 的异步是底层多线程函数异步。

来源：segmentfault.com/a/119000000…