js实现回调
回调函数的基本概念
回调函数是作为参数传递给另一个函数的函数，在特定条件或异步操作完成后被调用。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, name: 'Test Data' };
callback(data);
}, 1000);
}
fetchData(data => {
console.log('Received:', data);
});错误优先回调模式
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(function(a) {
getMoreData(a, function(b) {
getMoreData(b, function(c) {
console.log(c);
});
});
});
// Promise改进方案
getData()
.then(a => getMoreData(a))
.then(b => getMoreData(b))
.then(c => console.log(c));事件监听回调
DOM事件处理是回调的典型应用：
document.getElementById('myButton').addEventListener('click', function() {
console.log('Button clicked!');
});注意事项
- 避免过度嵌套回调
- 处理回调中的错误情况
- 考虑使用Promise或async/await等现代异步方案
- 注意this绑定问题，必要时使用bind()或箭头函数
