事件和回调函数的缺陷

事件和回调函数的缺陷

我们习惯于使用传统的回调或事件处理来解决异步问题

事件：某个对象的属性是一个函数，当发生某一件事时，运行该函数

dom.onclick = function(){

}

回调：运行某个函数以实现某个功能的时候，传入一个函数作为参数，当发生某件事的时候，会运行该函数。

dom.addEventListener("click", function(){

})

本质上，事件和回调并没有本质的区别，只是把函数放置的位置不同而已。

一直以来，该模式都运作良好。

直到前端工程越来越复杂…

目前，该模式主要面临以下两个问题：

回调地狱：某个异步操作需要等待之前的异步操作完成，无论用回调还是事件，都会陷入不断的嵌套

实例1

<div>
	<button id="btn1">按钮1：给按钮2注册点击事件</button>
	<button id="btn2">按钮2：给按钮3注册点击事件</button>
	<button id="btn3">按钮3：点击后弹出hello</button>
</div>

const btn1 = document.querySelector("#btn1"),
 	btn2 = document.querySelector("#btn2"),
 	btn3 = document.querySelector("#btn3");
btn1.addEventListener("click",()=>{
	btn2.addEventListener('click',()=>{
		btn3.addEventListener('click',()=>{
			alert("hello")
		})
})
})

实例2

/*
            邓哥心中有三个女神
            有一天，邓哥决定向第一个女神表白，如果女神拒绝，则向第二个女神表白，直到所有的女神都拒绝，或有一个女神同意为止
            用代码模拟上面的场景
        */
        function biaobai(god, callback) {
            console.log(`邓哥向女神【${god}】发出了表白短信`);
            setTimeout(() => {
                if (Math.random() < 0.1) {
                    //女神同意拉
                    //resolve
                    callback(true);
                } else {
                    //resolve
                    callback(false);
                }
            }, 1000);
        }

        biaobai("女神1", function(result) {
            if (result) {
                console.log("女神1答应了，邓哥很开心!")
            } else {
                console.log("女神1拒绝了，邓哥表示无压力，然后向女神2表白");
                biaobai("女神2", function(result) {
                    if (result) {
                        console.log("女神2答应了，邓哥很开心!")
                    } else {
                        console.log("女神2十分感动，然后拒绝了邓哥，邓哥向女神3表白");
                        biaobai("女神3", function(result) {
                            if (result) {
                                console.log("女神3答应了，邓哥很开心!")
                            } else {
                                console.log("邓哥表示生无可恋!!");
                            }
                        })
                    }
                })
            }
        })

实例3 (json可自行编写)

//获取李华所在班级的老师的信息
        ajax({
            url: "./data/students.json?name=李华",
            success: function(data) {
                for (let i = 0; i < data.length; i++) {
                    if (data[i].name === "李华") {
                        const cid = data[i].classId;
                        ajax({
                            url: "./data/classes.json?id=" + cid,
                            success: function(data) {
                                for (let i = 0; i < data.length; i++) {
                                    if (data[i].id === cid) {
                                        const tid = data[i].teacherId;
                                        ajax({
                                            url: "./data/teachers.json?id=" + tid,
                                            success: function(data) {
                                                for (let i = 0; i < data.length; i++) {
                                                    if (data[i].id === tid) {
                                                        console.log(data[i]);
                                                    }
                                                }
                                            }
                                        })
                                        return;
                                    }
                                }
                            }
                        })
                        return;
                    }
                }
            }
        })

2. 异步之间的联系：某个异步操作要等待多个异步操作的结果，对这种联系的处理，会让代码的复杂度剧增