如何理解 JavaScript 中的回调和回调地狱？

JavaScript 是一种流行的轻量级、解释型编译客户端脚本语言。大多数 Web 应用程序在客户端使用 JavaScript。通过为 JavaScript 提供运行时环境，它也可以在服务器端（Node.js）使用。在本文中，我们将介绍回调和回调地狱。

回调：回调是作为参数传递给另一个函数的函数，该函数根据结果执行回调。它们基本上是仅在产生结果后才执行的函数。回调是异步 JavaScript 的重要组成部分。

例子：

Javascript

// Main function
const mainFunction = (callback) => {
    setTimeout(() => {
        callback([2, 3, 4]);
    }, 2000)
}
  
// Add function
const add = (array) => {
    let sum = 0;
    for(let i of array) {
        sum += i;
    }
    console.log(sum);
}
  
// Calling main function
mainFunction(add);

输出：

9

说明：这里我们在 mainFunction 中使用了 setTimeout 来模拟一些 I/O 操作或请求调用。传递的回调函数用于对数组的元素求和。 2 秒后，打印出数组的总和，即 9。

回调地狱：回调地狱本质上是嵌套的回调，相互堆叠形成金字塔结构。每个回调依赖/等待前一个回调，从而形成影响代码可读性和可维护性的金字塔结构。

示例：在下面的示例中，我们将单词 GeeksForGeeks 拆分为三个单独的单词，并尝试一个接一个地为每个单词设置动画。

HTML

  

    
    
    
  
    Callback Hell
      
    
        * {
            padding: none;
            margin: none;
            box-sizing: border-box;
        }
  
        .word {
            color: #308d46;
            font-size: 4rem;
            transition: all .5s ease-in;
            margin: 0 5px;
            transform: translateY(3.8rem);
            opacity: 0;
        }
  
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 95vw;
            height: 95vh;
        }
  
        .container {
            overflow: hidden;
            display: flex;
            flex-direction: row;
        }
  
        .animate {
            opacity: 1;
            transform: translateY(0);
        }
    

  

    
        Geeks
        For
        Geeks
    


    let words = document.querySelectorAll(".word");
  
    const animateAll = (animate) => {
        setTimeout(() => {
            animate(words[0]);
            setTimeout(() => {
                animate(words[1]);
                setTimeout(() => {
                    animate(words[2]);
                }, 1000)
            }, 1000)
        }, 1000)
    }
  
    const animate = (word) => {
        word.classList.add("animate");
    }
  
    animateAll(animate);

  

输出：我们可以注意到 animateAll函数采用金字塔结构，因此难以阅读。

Geeks For Geeks 动画回调输出

参考： https://developer.mozilla.org/en-US/docs/Glossary/Callback_function