JavaScript回调函数

在 JavaScript 中，回调函数（Callback Function）指的是将一个函数作为参数传递给另一个函数，随后这个函数在某个时刻被调用。回调函数通常用于异步编程中，例如处理用户输入、执行异步操作（如网络请求或定时器等）时。

1. 回调函数的基本概念

回调函数通常作为另一个函数的参数，并且在某些操作完成时被调用。回调函数的使用允许代码非同步执行并保持灵活性。

示例：同步回调函数

function greet(name, callback) {
    console.log("Hello, " + name);
    callback();
}

function sayGoodbye() {
    console.log("Goodbye!");
}

greet("Alice", sayGoodbye);
// 输出：
// Hello, Alice
// Goodbye!

在这个例子中，greet 函数接受两个参数：name 和一个回调函数 callback。当 greet 函数执行完毕时，回调函数 sayGoodbye 被调用。

示例：异步回调函数

回调函数常用于异步编程中，例如在进行网络请求、读取文件或设置定时器时。

function fetchData(callback) {
    setTimeout(() => {
        console.log("数据已加载");
        callback("数据内容");
    }, 2000);
}

function processData(data) {
    console.log("处理数据:", data);
}

fetchData(processData);
// 输出：
// 数据已加载
// 处理数据: 数据内容

在上面的代码中，fetchData 函数模拟了一个异步操作，使用 setTimeout 来模拟延迟。回调函数 processData 会在数据加载后被调用，接收加载的数据并处理。

2. 回调函数的常见应用场景

• 事件处理：在用户操作或系统事件发生时执行特定的代码（例如点击按钮、提交表单等）。
• 异步操作：如处理文件读取、HTTP 请求、数据库查询等。
• 定时器：使用 setTimeout 或 setInterval 等定时器函数。

示例：事件处理中的回调函数

// 假设我们有一个按钮元素
const button = document.querySelector("#myButton");

button.addEventListener("click", function() {
    alert("按钮被点击了！");
});

在这个例子中，匿名函数作为回调函数传递给 addEventListener，当按钮被点击时，回调函数就会执行。

3. 回调地狱（Callback Hell）

当多个异步回调函数嵌套时，代码会变得复杂，难以维护，这种现象通常称为 回调地狱（Callback Hell）。为了避免回调地狱，现代 JavaScript 提供了 Promises 和 async/await，它们能更好地处理异步操作。

回调地狱示例

function fetchData(url, callback) {
    setTimeout(() => {
        console.log(`从 ${url} 获取数据`);
        callback("数据");
    }, 1000);
}

fetchData("url1", function(data1) {
    console.log(data1);
    fetchData("url2", function(data2) {
        console.log(data2);
        fetchData("url3", function(data3) {
            console.log(data3);
        });
    });
});

4. 使用 Promises 和 async/await 避免回调地狱

回调地狱的问题可以通过使用 Promise 和 async/await 来解决，它们提供了更清晰的代码结构。

使用 Promise

function fetchData(url) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`从 ${url} 获取数据`);
            resolve("数据");
        }, 1000);
    });
}

fetchData("url1")
    .then(data1 => {
        console.log(data1);
        return fetchData("url2");
    })
    .then(data2 => {
        console.log(data2);
        return fetchData("url3");
    })
    .then(data3 => {
        console.log(data3);
    })
    .catch(err => console.error(err));

使用 async/await

async function fetchAllData() {
    const data1 = await fetchData("url1");
    console.log(data1);

    const data2 = await fetchData("url2");
    console.log(data2);

    const data3 = await fetchData("url3");
    console.log(data3);
}

fetchAllData();

总结

• 回调函数 是将一个函数作为参数传递给另一个函数的方式，常用于异步编程。
• 在 JavaScript 中，回调函数通常用于事件处理、异步操作和定时器。
• 回调地狱是回调函数嵌套过深导致代码难以维护的现象，现代 JavaScript 通过 Promise 和 async/await 可以更好地处理异步操作，避免回调地狱。