javascript回调地狱

最新推荐文章于 2025-07-03 21:11:00 发布

前端小黑

最新推荐文章于 2025-07-03 21:11:00 发布

阅读量922

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/zemprogram/article/details/103862513

JavaScript 专栏收录该内容

101 篇文章

订阅专栏

本文深入探讨了回调地狱的概念，分析其成因及对代码可读性和维护性的影响，并提出了有效的解决方案，包括合理命名函数、分离函数定义和调用，以提高代码质量和效率。

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

回调地狱

要了解回调地狱，我们首先需要知道回调函数是什么，在我们平时的代码中，经常出现很多将函数作为参数，传入到方法中，然后在方法中调用该方法，常见的就是定时器，各种DOM操作，各种异步请求
在使用这些回调函数的时候，我们有时会在一个回调函数中，再传入一个函数，然后在里面，又传入一个，这样一层层的回调，最终就会形成回调地狱
实际上，回调地狱只是我们在使用回调幻术时一种不好的编码习惯，这种习惯导致代码可读性差，而且难以维护，我们看看下面的代码

document.getElementById('test').addEventListener('click',function(){
    let data=[1,2,3]
    setTimeout(function(){
        data.map(function(d){
            ajax({
                type:'get',
                url:'/test',
                success:function(res){

                }
            })
        })
    },1000)
})

像上面这段代码，经历了几个回调，后面出现的})已经让我们有点难以找到它对应的是哪一个函数了，这就是回调地狱带来的问题

解决回调地狱的思路

要解决回调地狱的问题，我们首先看看回调地狱给我们带来了什么问题：可读性差和难以维护，所以我们着重从这两点来解决问题
我们从下面这段代码来逐步解决问题

document.getElementById.addEventListener('click',function(event){
    ajax({
        type:'post',
        url:'/test',
        data:`content=${event.toElement.innerHTML}`,
        success:function(res){
            event.toElement.innerHTML=res.data
            console.log('success')
        }
    })
})

为回调函数赋以体现功能的名称

难以维护，体现在，很多回调函数我们一般都会使用匿名函数，而匿名函数在我们维护代码特别是找bug的时候会存在一定的问题，所以，为了解决这个问题，我们可以先为这些函数命名
看看上面的代码，有两个回调函数，我们分别为这两个函数命名

document.getElementById('test').addEventListener('click',function testClick(event){
    ajax({
        type:'post',
        url:'/test',
        data:`content=${event.toElement.innerHTML}`,
        success:function successResponse(res){
            event.toElement.innerHTML=res.data
            console.log('success')
        }
    })
})

为函数添加相应的名称后，我们在寻找报错时就相对更为方便了

将函数分离出来

通过上面的修改，我们使得函数得到更好的维护，但是，代码的可读性仍然很差，因为只有两个回调函数，所以我们还能较好地将括号对应起来，但是如果括号多了，就不一定了，为了解决这个问题，我们可以将函数分离出来写，修改上面的代码

document.getElementById('test').addEventListener('click',testClick)
function testClick(event){
    ajax({
        type:'post',
        url:'/test',
        data:`content=${event.toElement.innerHTML}`,
        success:successResponse
    })
}
function successResponse(res){
    event.toElement.innerHTML=res.data
    console.log('success')
}

通过这种分离的写法，我们可以发现，括号的对应上已经变得十分清晰了，通过这样分离，代码的可读性更强了
这里我们将函数放到执行的位置下面，利用函数的提升使得在上面可以使用。这里我个人也是推荐在处理这些回调地狱的时候，采用将功能函数写在下面，执行写在上面的做法，因为这样做的话，在刚看到这个文件的代码的时候就可以清晰地看到整个代码在做什么，然后再具体看到每个具体的功能模块在做什么