当前位置：首页 > JavaScript

js实现回调

2026-01-30 21:34:01JavaScript

回调函数的基本概念

回调函数是JavaScript中一种常见的异步编程模式，通过将函数作为参数传递给另一个函数，在特定条件或异步操作完成后执行。回调函数允许代码非阻塞地运行，常用于事件处理、定时器、网络请求等场景。

同步回调示例

同步回调在函数执行过程中立即被调用，常用于数组方法或简单逻辑处理。

function greet(name, callback) {
    console.log(`Hello, ${name}!`);
    callback(); // 同步调用回调
}

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

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

异步回调示例

异步回调在操作（如定时器、网络请求）完成后触发，通过事件循环机制执行。

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

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

fetchData(handleData); 
// 输出（1秒后）: 
// Received: { id: 1, value: "Async Data" }

回调地狱与解决方案

多层嵌套回调可能导致“回调地狱”，可通过以下方式优化：

Promise链式调用

function asyncTask() {
    return new Promise((resolve) => {
        setTimeout(() => resolve("Task Done"), 500);
    });
}

asyncTask()
    .then(result => console.log(result))
    .catch(error => console.error(error));

Async/Await语法

async function runTask() {
    try {
        const result = await asyncTask();
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}
runTask();

事件监听回调

通过事件监听器实现回调，常见于DOM操作：

document.getElementById("myButton").addEventListener("click", function() {
    console.log("Button clicked!");
});

错误处理模式

回调函数通常约定第一个参数为错误对象（Node.js风格）：

function readFile(callback) {
    const error = new Error("File not found");
    const data = null;
    callback(error, data); // 优先传递错误
}

readFile((err, data) => {
    if (err) return console.error("Error:", err.message);
    console.log("Data:", data);
});

高阶函数中的回调

将回调函数作为高阶函数的参数，实现灵活的逻辑控制：

js实现回调

function mapArray(arr, transform) {
    return arr.map(transform);
}

const numbers = [1, 2, 3];
const doubled = mapArray(numbers, x => x * 2);
console.log(doubled); // [2, 4, 6]