事件和回调函数的缺陷--回调地狱、异步之间的联系
事件和回调函数的缺陷
什么叫异步处理，就是我们要做一件事，这件事分成两个部分，这件事做着做着突然发生一件事 ，这件事要等一会才能知道结果，这就异步场景。比如setTimeout，要过段时间才处理，再比如说，事件，我们注册事件，和触发事件就是分开的
事件：某个对象的属性是一个函数，当发生某一件事时，运行该函数
dom.onclick = function (){
console.log("元素对象被点击了")
}
这里我们给dom元素注册一个点击事件，注意哦这时候还没有点击这个dom元素，当我们点击这个dom元素后才会触发事件打印1，这里就是注册事件和触发事件是分开的。
回调：运行某一个函数来实现一个功能的时候，传入一个函数作为参数，当发生某件事的时候，会运行该函数
最典型的就是ajax请求了，在向服务器发送请求，请求成功服务器返回数据，对这些数据进行处理的函数
dom.onclick = function (){
console.log("元素对象被点击了")
}
dom.addEventListener("click",function(){
console.log("该元素对象被点击后，触发的回调函数")
})
本质上，事件和回调并没有本质的区别，只是函数放置的位置不同而已
一直以来，使用传统的回调或事件处理来解决异步问题的这种模式都运作良好。直到前端工程越来越复杂...这种处理异步的方法就出现了下面的两个问题：
1.回调地狱：某个异步操作需要等待之前的异步操作完成，无论用回调还是事件，都会陷入不断的嵌套中
回调地狱1:
这里按钮3必须要等到按钮2被点击了才会被注册事件，而按钮2又必须要等到按钮1被点击了才会被注册事件
<body>
<p>
<button id="btn1">按钮1：给按钮2注册点击事件</button>
<button id="btn2">按钮2：给按钮3注册点击事件</button>
<button id="btn3">按钮3：点击弹出Hello</button>
</p>
<script>
const btn1 = document.querySelector("#btn1")
const btn2 = document.querySelector("#btn2")
const btn3 = document.querySelector("#btn3")
// btn1.onclick = function(){
// btn2.onclick = function(){
// btn3.onclick = function (){
// alert("Hello")
// }
// }
// }
btn1.addEventListener("click",function(){
btn2.addEventListener('click',function(){
btn3.addEventListener('click',function(){
alert('Hello')
})
})
})
</script>
</body>
回调地狱2：吴家长心中有三个女神，有一天，吴家长决定向第一个女神表白，如果女神拒绝了，这向第二个女神表白，直到所有的女神拒绝或者有一个女神同意了
<body>
<script>
/**
* 吴家长心中有三个女神，
* 有一天，吴家长决定向第一个女神表白，如果女神拒绝了，这向第二个女神表白，直到所有的女神拒绝
* 或者有一个女神同意了
*/
function biaobai(god, callback) {
console.log(`吴家长向【女神${god}】发出了表白短信`);
setTimeout(() => {
if (Math.random() < 0.3) {
callback(true);
} else {
callback(false);
}
}, 1000);
}
biaobai(1, function (result) {
if (result) {
console.log("女神1同意了，吴家长很开心");
} else {
console.log(
"女神1拒绝了，吴家长表示无压力，然后接着继续向下一位女神表白"
);
biaobai(2, function (result) {
if (result) {
console.log("女神2同意了，吴家长很开心");
} else {
console.log(
"女神2拒绝了，吴家长表示无压力，然后接着继续向下一位女神表白"
);
biaobai(3, function (result) {
if (result) {
console.log("女神3同意了，吴家长很开心");
} else {
console.log(
"女神3拒绝了，吴家长生无可恋，表示还需要在撒一张更大的网"
);
}
});
}
});
}
});
</script>
</body>
这样的代码嵌套太深
异步之间的联系：某个异步操作要等待多个异步操作的结果，对这种联系的处理，会让代码的复杂度剧增
这次吴家长撒了一张更大的网了，这次要向二十位女神表白，决定要用更高效的方法；
他同时向二十位女神表白，如果有女神同意，就拒绝其他的女神，并且当所有的女神回复完成后
他要把所有的回复都记录到日志中进行分析
<body>
<script>
function biaobai(god, callback) {
console.log(`吴家长向【${god}】发出了表白短信`);
setTimeout(() => {
if (Math.random() < 0.06) {
callback(true);
} else {
callback(false);
}
}, Math.floor(Math.random() * (3000 - 1000) + 1000))
}
let agreeGod = null
const results = []
for (let i = 1; i <= 20; i++) {
biaobai(`女神${i}`, (result) => {
results.push(result)
if (result) {
console.log(`女神${i}同意了`);
//这里我们要判断一下只有一个女神同意了，就拒绝其他同意的女神
//但是这里我们要怎么做呢？因为result不同异步处理返回的结果
//我们要在一个异步里面知道其他异步的结果
//可以设置一个全局变量，（锁）
if(agreeGod){
console.log('不好意思，刚才是我朋友用我手机，乱发的')
}else{
agreeGod = `女神${i}`
console.log('吴家长终于找到真爱了')
}
} else {
console.log(`女神${i}拒绝了`)
}
//记录到日志，但是写在这里不怎么符合逻辑，记录日志这件事应该单独抽离出来
if(results.length === 20){
console.log('记录到日志', results)
}
})
}
</script>
</body>
上面拒绝其他同意的女神，类似这样的操作过多的话就需要设置多个的全局变量，这就会让代码更加的复杂，也会污染全局。类似记录日志这件事的应该都单独抽离出来，这样子代码多了 逻辑也不会乱，该完成什么的就完成什么，不会过多的操作。
浙公网安备 33010602011771号