JS中的回调地狱以及promise对象解决回调地狱

最新推荐文章于 2025-05-28 23:08:58 发布

原创最新推荐文章于 2025-05-28 23:08:58 发布 · 582 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#回调 #promise对象 #回调地狱 #JavaScript

本文通过红绿灯示例介绍了JavaScript中回调地狱的问题，并演示了如何使用Promise对象改善代码结构，提高可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在用JavaScript时，为了实现某些逻辑会用到函数嵌套，但是嵌套过多会形成一个回调地狱，影响对代码的理解以及可读性。

以红绿灯为例：

setTimeout(function(){
    console.log('红灯')
	setTimeout(function(){
        console.log('绿灯')
        setTimeout(function(){
            console.log('黄灯')
        },2000)
    },2000)
},2000)

解决回调地狱的方法有很多，如promise对象，采用链式的then通过异步操作实现按顺序从上至下进行。上一个then里的回调函数返回一个promise对象，下一个then的回调函数会等上一个then里的函数返回的promise对象状态发生变化，才会被调用。

function light(t,change){
    return new Promise((res)=>{
        setTimeout(()=>{
            res(change)
        },t)
    })
}

;(function aa(){    //用闭包形成一个循环
    light(3000,'红灯').then((res)=>{
        console.log(res)
        return light(3000,'绿灯')    //执行完成后返回下一个promise对象
    }).then((res)=>{
        console.log(res)
         return light(3000,'黄灯')
    }).then((res)=>{
         console.log(res)
         aa()    //调用aa()，形成循环
    })
})();