回调函数

回调函数本质上就是一个普通函数
一个函数A 以实参的形式传递到函数B中
在函数B中,以形参的方式调用函数
此时函数A 就可以称为函数B的回调函数
回调函数的使用场景为异步代码的解决方案

function A () {
    console.log('我是函数A')
}
function (callback) {
    callback()
}
B(A)

//模拟网络请求
function fn(chenggong,shibai){
    const timer = Math.ceil(Math.random() * 3000)
    console.log('班长,去帮我买拼水')
    
    setTimeout(() => {
        if(timer > 2500){
            console.log('买水失败,用时:',timer)
            shibai()
        } else {
            console.log('买水成功,用时:',timer)
            chenggong()
        }
    },timer)
}
fn(
    () => {console.log('谢谢班长,我和你开玩笑的,退下吧')},
    () => {console.log('买不到就别回来了')}
)

回调地狱

这不是我们写代码的时候出现的某个漏洞
只是我们再利用回调函数解决问题的时候,代码量多了之后的一个视觉体验
回调地狱的代码不利于我们去维护或者管理,所以后续在处理异步任务的时候,我们需要一些更简洁的方法
此时出现了一个东西叫 promise,他也是一个异步代码的解决方案
需求:
- 在班长买水失败后,让他再次去买水(重新调用 fn 函数)
- 如果班长第二次也失败了,让他继续去买水
- 第一次买水成功,让班长再去买一箱饮料

// 调用 fn 函数 班长就去买水
function fn (chenggong,shibai){
    const timer = Math.ceil(Math.random() * 3000)
    console.log('班长,去帮我买瓶水')
    
    setTimeout(() => {
        if(timer > 2000){
            console.log('买水失败,用时:',timer)
            shibai()
        } else {
            console.log('买水成功,用时:',timer)
            chenggong()
        }
    },timer)
}

fn(
    () => {
        fn(
            () => {console.log('班长买完水后又买了一箱饮料')},
            () => {console.log('班长就买了一瓶水,他不愿意给你们买饮料')}
        )
    },
    () => {
        fn(
            () => {console.log('班长第二次买水成功')},
            () => {
                fn(
                    () => {console.log('第三次买水成功')},
                    () => {console.log('第三次买水由失败了')}
                )
            }
        )
    }
)

JS 关于回调函数,回调地狱

回调函数

回调地狱