27前端成长日记 - 异步与回调

异步

通常浏览器在执行 JavaScript 代码都是从上往下一行一行的执行，也就是同步执行

console.log(1)
console.log(2)
//1
//2

上面的代码就一个同步代码，那什么异步呢

什么是异步？

我们知道了同步，应该就能猜到异步执行方式；对，异步就是上面的没执行完就开始执行下面的代码。

那如何触发异步呢，在 JavaScript 中，定时器 和 HTTP请求 就是异步的

function fn(){
    setTimeout(()=>{
        console.log(1)
    },1000)
}
fn()
console.log(2)
// 2
// 1(1s 后才打印出1)

上面的就是异步的先调用了 fn 但是却先执行的了下面的代码。

一句总结就是，同步等结果，异步不等结果直接进行下一步

回调

我们知道异步是不等结果直接进行下一步，那现在有一个需求，我想在异步代码执行完毕之后执行某句代码怎么办？

就拿上面的代码举例，我想在打印完 1 之后再打印 2

那这不简单吗直接把代码写在后面不就好了吗

function fn(){
    setTimeout(()=>{
        console.log(1)
        console.log(2)
    },1000)
}
fn()
// 1
// 2

但是这样写有问题，如果多个函数之间调用时或多人配合时，你负责写函数A，你的同事负责写函数B，这时候你怎么办？把同事的代码写一遍？显然是不能的，这时你就需要让你的同事把的函数B传给你，你直接把函数B当做参数传到你写的函数A中执行即可。这就是回调

将一个函数传到另一个函数中执行，这种行为就叫做回调

function A(callback){
    setTimeout(()=>{
        console.log(1)
        callback()
    },1000)
}

function B(){
    console.log(2)
}

A(B)

// 1
// 2