当前位置：首页 > JavaScript

js实现回调

2026-03-01 12:39:11JavaScript

回调函数的基本概念

回调函数是作为参数传递给另一个函数的函数，在特定条件或异步操作完成后被调用。JavaScript中回调广泛用于事件处理、异步操作（如AJAX、定时器）等场景。

同步回调示例

同步回调在函数执行过程中立即被调用：

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);
}

fetchData((result) => {
    console.log('Received:', result);
});

错误优先回调模式

Node.js中常见的约定，回调的第一个参数保留给错误对象：

function readFile(callback) {
    const error = null; // 模拟无错误
    const content = 'File content';
    callback(error, content);
}

readFile((err, data) => {
    if (err) {
        console.error('Error:', err);
    } else {
        console.log('Data:', data);
    }
});

回调地狱与解决方案

多层嵌套回调会导致代码难以维护（回调地狱），可通过以下方式优化：

使用命名函数替代匿名回调

采用Promise或async/await


// 回调地狱示例
getData((data1) => {
  process(data1, (data2) => {
      save(data2, (result) => {
          console.log(result);
      });
  });
});

// 改进方案 function handleData(data1) { process(data1, handleProcessed); }

function handleProcessed(data2) { save(data2, showResult); }

function showResult(result) { console.log(result); }

getData(handleData);


### 事件监听中的回调
DOM事件处理是回调的典型应用场景：
```javascript
document.getElementById('myButton').addEventListener('click', function() {
    console.log('Button clicked!');
});