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; ???????????????????} ???????????????}) ???????????} ???????}) ???}})

看效果，刷新了几次

<完>
20180803

发挥不广泛

js回调函数

原文地址：https://www.cnblogs.com/fahuibuguangfan/p/9508946.html