js callback 实现

回调函数的基本概念

回调函数（Callback Function）是 JavaScript 中通过将函数作为参数传递给另一个函数，并在特定条件或异步操作完成后执行的机制。回调函数常用于处理异步操作（如定时器、网络请求、事件监听等），确保代码在特定逻辑完成后继续执行。

同步回调的实现

同步回调在函数执行过程中立即被调用，常用于数组方法或同步操作中。

function processData(data, callback) {
    const result = data.toUpperCase();
    callback(result); // 同步调用回调
}

processData("hello", function(result) {
    console.log(result); // 输出 "HELLO"
});

异步回调的实现

异步回调在异步操作（如 setTimeout、fetch）完成后触发，避免阻塞主线程。

function fetchData(callback) {
    setTimeout(function() {
        const data = "Async Data";
        callback(data); // 异步操作完成后调用回调
    }, 1000);
}

fetchData(function(result) {
    console.log(result); // 1秒后输出 "Async Data"
});

回调的常见应用场景

1. 事件处理：如 addEventListener 的点击回调。
2. 定时器：setTimeout 或 setInterval 的回调。
3. 网络请求：如 fetch 或 XMLHttpRequest 的成功/失败回调。
4. 模块化代码：通过回调分离逻辑（如 Node.js 的 fs.readFile）。

// 事件监听示例
button.addEventListener("click", function() {
    console.log("Button clicked");
});

// Node.js 文件读取示例
const fs = require("fs");
fs.readFile("file.txt", "utf8", function(err, data) {
    if (err) throw err;
    console.log(data);
});

回调地狱与解决方案

多层嵌套回调（回调地狱）会降低代码可读性。可通过以下方式优化：

1. 命名函数：将匿名回调拆分为命名函数。
2. Promise：用 .then 链式调用替代嵌套。
3. Async/Await：以同步写法处理异步逻辑。

// 回调地狱示例
getData(function(a) {
    getMoreData(a, function(b) {
        getFinalData(b, function(c) {
            console.log(c);
        });
    });
});

// 使用 Promise 优化
getData()
    .then(a => getMoreData(a))
    .then(b => getFinalData(b))
    .then(c => console.log(c));

注意事项

1. 错误处理：回调中需手动处理错误（如 Node.js 的 err 参数）。
2. this 绑定：箭头函数可避免 this 指向问题。
3. 性能：过度嵌套回调可能影响性能，需合理拆分逻辑。

// 错误处理示例
fs.readFile("file.txt", "utf8", function(err, data) {
    if (err) {
        console.error("Error:", err);
        return;
    }
    console.log(data);
});