异步编程 -- 回调函数

函数也是一种数据类型，既可以当做参数传递，也可以当做方法值返回，函数在js中是一等公民。
一般情况下，把函数作为参数的目的就是为了获取函数内部的异步操作结果。

常见的异步api setTimeout setInterval ajax Promise

 

与异步编程相对的是 同步编程

console.log(1)
function add(x,y){
    console.log(2)
    return (x+y)
}
console.log(add(10,20));
console.log(3)
// 返回结果 1 2 30 3

 

异步编程

console.log(1)
setTimeout(function(){
    console.log(2);
    console.log("hello")
},100)
console.log(3)
// 返回结果 1 3 2 hello

 

异步函数 -- 输出返回值  不成立情况 -- 第一种

function sum(x,y){
    console.log(1)
    setTimeout(function(){
        console.log(2)
        var resault = x + y;
        return resault;  // 这里的return值拿不到
    },100)
    console.log(3)
    // 函数到此就执行结束，不会等待前面的定时器，所以姐直接返回了默认值undefined
}
console.log(sum(10,20))   // 1 3 undefined 2

 

第二种不成立情况

function sum(x,y){
    var resault;
    console.log(1)
    setTimeout(function(){
        console.log(2)
        resault = x + y;
    },100)
    console.log(3)
    return resault; //定时器还没有执行到
}
console.log(sum(10,20)) // 1 3 undefined 2        

 

第一种使用可以拿到值得情况，此方式只是助于理解异步，一般不用于实际开发

var res ;
function sum(x,y){
    console.log(1);
    setTimeout(function(){
        console.log(2);
        res = x+y;
    },100)
    console.log(3)
}   
sum(10,20);
setTimeout(function(){
    console.log("res",res)
},2000); // 此处的时间必须要大于前面的延时器时间

 

第二种可以拿到值的方法  -- 使用回调函数

function sum(x,y,callback){
    /*
    callback 就是回调函数 -->
    var x = 10;
    var y = 100;
    var callback = function(){}
    */
    console.log(1);
    setTimeout(function(){
        console.log(2)
        var resault = x + y;
        callback(resault);
    },200)
    console.log(3)
}

sum(10,100,function(resault){
    console.log(resault)// 将函数当做参数获取返回值
})

 

回调函数案例

function getajax(url,callback){
    let xhr = new XMLHttpRequest();
    xhr.open('get',url,true);
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200 ){
            console.log(xhr.responseText);
            // 回调函数的调用
            callback(xhr.responseText)
        }
    }
}        

// 函数调用
getajax('url',function(data){
　　console.log(data) // 此处可以拿到异步获取的数据
})