当前位置：首页 > JavaScript

js callback 实现

2026-02-02 10:58:51JavaScript

回调函数的基本概念

回调函数（Callback）是 JavaScript 中一种常见的异步编程模式，本质是将函数作为参数传递给另一个函数，并在特定条件或异步操作完成后执行。回调函数常用于事件处理、定时任务或异步操作（如 AJAX 请求）。

同步回调的实现

同步回调在代码执行过程中立即被调用，例如数组的 forEach 方法：

function processData(data, callback) {
    console.log("Processing data:", data);
    callback(); // 同步调用回调
}

processData("example", function() {
    console.log("Callback executed");
});

输出顺序为：

Processing data: example
Callback executed

异步回调的实现

异步回调在异步操作（如 setTimeout 或 AJAX）完成后触发：

function fetchData(callback) {
    setTimeout(function() {
        const data = { id: 1, name: "Test" };
        callback(data); // 异步调用回调
    }, 1000);
}

fetchData(function(result) {
    console.log("Received data:", result);
});

输出结果会在 1 秒后显示 Received data: { id: 1, name: "Test" }。

错误优先回调模式

Node.js 中常见的约定是错误优先回调（Error-first Callback），回调函数的第一个参数为错误对象（null 表示成功）：

function asyncOperation(success, callback) {
    setTimeout(function() {
        if (success) {
            callback(null, "Operation succeeded");
        } else {
            callback(new Error("Operation failed"));
        }
    }, 1000);
}

// 调用示例
asyncOperation(true, function(err, result) {
    if (err) {
        console.error("Error:", err.message);
    } else {
        console.log("Result:", result);
    }
});

回调地狱与解决方案

多层嵌套回调会导致“回调地狱”（Callback Hell），可通过以下方式优化：

命名函数：将匿名回调拆分为命名函数。
Promise：使用 Promise 链式调用替代嵌套。
Async/Await：通过 async/await 语法简化异步流程。

实际应用示例

以下是一个结合 AJAX 和回调的示例：

js callback 实现

function fetchUserData(userId, callback) {
    fetch(`https://api.example.com/users/${userId}`)
        .then(response => response.json())
        .then(data => callback(null, data))
        .catch(error => callback(error));
}

fetchUserData(123, function(err, user) {
    if (err) {
        console.error("Fetch failed:", err);
    } else {
        console.log("User data:", user);
    }
});