JavaScript异步之回调

回调"/>

JavaScript异步之回调

回调函数

JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数，而这个过程就叫做回调

举一个常用的例子：约会结束了，你送女朋友回家,你说：“到家了别忘了给我发条信息。”然后女朋友回家以后给你发了条信息。其实这就是一个回调的过程。你留了个参数函数（让女朋友给你发条信息）给女朋友，然后女朋友回家，回家的动作是主函数。她必须先回到家以后，主函数执行完了，再执行传进去的函数，然后你就收到一条信息了。

通过例子我们可以基本了解了 然后继续上代码：

//定义主函数，回调函数作为参数
function A(callback) {callback && typeof callback == "function" && callback();console.log('我是主函数');      
}
//定义回调函数
function B(){setTimeout("console.log('我是回调函数')", 1000);//模仿耗时操作  
}
//调用主函数，将函数B传进去
A(B);

输出：

运用回调函数解决哪些问题

let name = "姓名"
function yh() {
name = "袁姮",
console.log(`我是${name}`)
}
function ljj() {
console.log(`这周末刘家军又约${name}了`)
}
yh()
ljj()

输出：

上面的代码输出是没什么问题的，不存在异步，都单线程同步执行，继续看代码：

let name = "姓名"
function yh() {
setTimeout(() =>{
name = "袁姮",
console.log(`我是${name}`)
},0)
}function ljj() {
console.log(`这周末刘家军又约${name}了`)
}
yh()
ljj()

输出：

虽然定时器是0ms，但是yh函数确存在异步了，只有等主线程的内容走完，才能走异步函数
所以最简单的办法就是使用回调函数解决这种问题，ljj函数依赖于yh函数的执行结果，所以我们把ljj作为yh的一个回调函数

let name = "姓名"
function yh(callback) {
setTimeout(() =>{
name = "袁姮",
console.log(`我是${name}`)
callback && typeof callback == "function" && callback()
},0)
}function ljj() {
console.log(`这周末刘家军又约${name}了`)
}
yh(ljj)

输出：

这个例子很简单，我继续往下讲
当回调的层级太多了，就会形成所说的“回调地狱，代码维护成本会高很多
我们看下面这个例子

     function funA(callBack) {console.log("A");setTimeout(() => {callBack()}, 100);}function funB() {console.log("B");}function funC(callBack) {console.log("C");setTimeout(() => {callBack()}, 1000);}function funD() {console.log("D");}function funE() {console.log("E");}function funF() {console.log("F");}funA(() => {funB()funC(() => {funD()})funE()})funF()

输出：

一般情况下，不会嵌套这么多层级，如果过多都会考虑拆分出来，此例子纯属用来练习；
如果你能看出输出顺序，那么对于回调函数也基本掌握，这段代码就不多做解释了，如果还是不怎么了解，那么debug一下看一下执行顺序，多看几遍再结合我前面所讲差不多就能理解了

链式回调

大家还是否记得在使用jQuery时，我们会经常这样去操作一个jQuery节点

$("element").show().css("color","red");

这也是利用链式调用，原理很简单：就是jQuery节点在调用api后都会返回节点自身，类似于：

let obj = {a: 0,fun(){this.a += 1return this
}
}
obj.fun().fun()
console.log(obj.a) // 2

现在大致理解了链式调用的原理了吧！
对于链式回调我们也经常接触，例如一些的各种确认框
下面举一个饿了么里面confirm弹框的例子this.$confirm().then().catch()

<template><el-button type="text" @click="open">点击打开 Message Box</el-button>
</template><script>export default {methods: {open() {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {// 成功回调this.$message({type: 'success',message: '删除成功!'});}).catch(() => {// 失败回调this.$message({type: 'info',message: '已取消删除'});          });}}}
</script>

我相信很多人都会通过这种链式回调的方式处理异步回调（如ajax,可以看下我昨天的那个demo），因为可读性比普通的回调嵌套要高的多，但是维护的成本也要高出很多，而且实际开发中的情况要比这个复杂

今天就说到这里，预知后事如何，且听下次分解

友情链接：点击查看所有文章目录

友情链接：点击查看　JavaScript异步系列文章目录