回调地狱、异步之间的联系_异步回调地狱-CSDN博客

本文链接：https://blog.csdn.net/weixin_44290444/article/details/109534873

回调地狱
什么叫异步处理，就是我们要做一件事，这件事分成两个部分，这件事做着做着突然发生一件事，这件事要等一会才能知道结果，这就异步场景。比如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(</