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

看效果，重新整理了幾次