JavaScript回调函数

回调函数是作为参数传递给另一个函数的函数，该函数在完成某个操作后执行回调函数。回调函数是JavaScript中处理异步操作的常用方式。

回调函数的概念

回调函数本质上是一种设计模式，称为回调模式。它允许函数在完成任务后通知调用者或执行特定操作。

// 简单的回调函数示例
function greet(name, callback) {
  console.log(`Hello, ${name}!`);
  callback();
}

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

// 调用greet函数，并将sayGoodbye作为回调函数传递
greet('Alice', sayGoodbye);

同步回调

同步回调是在函数执行过程中立即执行的回调函数，不会涉及异步操作。

// 数组的forEach方法使用同步回调
const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number * 2);
});

console.log('Loop completed!');

异步回调

异步回调是在异步操作完成后执行的回调函数，常用于处理网络请求、文件操作、定时器等异步任务。

// 定时器使用异步回调
console.log('Start');

setTimeout(function() {
  console.log('Timer completed');
}, 2000);

console.log('End');

回调函数的使用场景

回调函数在JavaScript中广泛应用于以下场景：

• 定时器（setTimeout, setInterval）
• 事件处理（addEventListener）
• AJAX请求
• 文件操作
• 数组方法（forEach, map, filter, reduce等）

回调地狱

当多个异步操作嵌套使用回调函数时，会导致代码结构变得复杂和难以维护，这种情况被称为"回调地狱"。

// 回调地狱示例
asyncOperation1(function(result1) {
  asyncOperation2(result1, function(result2) {
    asyncOperation3(result2, function(result3) {
      asyncOperation4(result3, function(result4) {
        console.log(result4);
      });
    });
  });
});

如何避免回调地狱

1. 使用命名函数替代匿名函数
2. 使用模块化设计
3. 使用Promise
4. 使用async/await

回调函数的优点

• 实现异步编程
• 提高代码的灵活性和可扩展性
• 支持事件驱动编程

回调函数的缺点

• 可能导致回调地狱
• 错误处理复杂
• 代码可读性和可维护性较差

示例：使用回调函数处理AJAX请求

// 使用XMLHttpRequest和回调函数发送AJAX请求
function fetchData(url, successCallback, errorCallback) {
  const xhr = new XMLHttpRequest();
  
  xhr.open('GET', url, true);
  
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      successCallback(xhr.responseText);
    } else {
      errorCallback(new Error(xhr.statusText));
    }
  };
  
  xhr.onerror = function() {
    errorCallback(new Error('Network error'));
  };
  
  xhr.send();
}

// 调用fetchData函数
fetchData(
  'https://api.example.com/data',
  function(data) {
    console.log('Data received:', data);
  },
  function(error) {
    console.error('Error:', error.message);
  }
);