回调函数的理解

js回调函数

---

 

什么是回调函数

在JavaScript中一个函数可以作为另一个函数的参数，这个作为参数的函数就叫回调函数，以回调函数作为参数的函数叫做主函数

 

回调函数简单写法

//含有回调函数的函数
function main(callback){
…………//主函数逻辑
callback(a,b,c……)// 主函数触发某种条件传值到回调函数并执行
}
//调用
main(function callback(a,b,c……){
………………//回调函数中逻辑处理
})

---

 

回调函数场景运用

场景：我今年18岁，准备找个女朋友，有三个人选（姑娘A、B、C），我表白之后姑娘都会过一段时间给我回复；我最喜欢A姑娘，不过我不知A姑娘是不是也喜欢我，表白成功率为0.4，我次之喜欢B姑娘，表白成功率为0.5，我知道姑娘C很喜欢我，表白成率为1，那么问题来了，谁会成为我最终的女票呢？

场景模拟：用Math.randowm()生成一个[0,1)之间的一个随机数，如果这个随机数小与scale(scale可以表示表白成功的概率）,则表示我表白成功了，用setTimeout(),延时1000ms，表示姑娘们需要这么长时间给我回复

用Java习惯实现：

 

function getAmie(woman,scale){//woman我表白的姑娘 scale 表白成功的概率 
   let temp = Math.random();
    console.log(temp);
    if(temp<scale){
        console.log(`${woman}答应做我女朋友`);
        temp = woman;
    }else{
        console.log(`${woman}对我说你是个好人`);
        temp = false;
    }
    setTimeout(() => {
        return temp;
    }, 1000);
}
//调用方法，计算谁最终成为我的女朋友
if(!getAmie("姑娘A",0.5)){
    if(!getAmie("姑娘B",1)){

    }else{
    console.log("最终姑娘B成为了我的女朋友");
    }
}else{
    console.log("最终姑娘A成为了我的女朋友");
}

然而你会发现执行结果是这样的：

没错这个确实不是我们想要的，因为JavaScript是单线程的，不会等到一个函数执行完才会去执行另一个函数，所以用这种方式写是不行的，用回调方式实现乳腺：

 

function getAmie(woman,scale,callback){//woman我表白的姑娘 scale 表白成功的概率 callback回调函数，callback参数为姑娘名时表示表白成功，为false表示获得好人证一张
   let temp = Math.random();
    console.log(temp);
    if(temp<scale){
        console.log(`${woman}答应做我女朋友`);
        temp = woman;
    }else{
        console.log(`${woman}对我说你是个好人`);
        temp = false;
    }
    setTimeout(() => {
        callback(temp);
    }, 1000);
}
//调用方法，计算谁最终成为我的女朋友
getAmie("姑娘A",0.4,(temp) => {
    if(temp){
        console.log("最终姑娘A成为了我的女朋友");
        return;
    }else{
        getAmie("姑娘B",0.5,(temp) => {
            if(temp){
                console.log("最终姑娘B成为了我的女朋友");
                return;
            }else{
                getAmie("姑娘C",1,(temp) => {
                    if(temp){
                      console.log("最终姑娘C成为了我的女朋友");
                    }else{
                        return;
                    }
                })
            }
        })
    }
})

看效果，刷新了几次