JavaScript 中的回调函数(Callback)是一种常见的编程模式,它允许一个函数在某个特定事件发生后被调用。回调函数通常作为参数传递给另一个函数,并在该函数执行完毕后被调用。
回调函数本质上是一个函数,它被传递给另一个函数并在适当的时候被调用。这种机制使得代码可以更加模块化和可重用。
setTimeout
和 setInterval
。forEach
, map
, filter
等。function greet(name, callback) {
console.log('Hello, ' + name);
callback();
}
greet('Alice', function() {
console.log('Callback executed!');
});
function delayedGreet(name, delay, callback) {
setTimeout(function() {
console.log('Hello, ' + name);
callback();
}, delay);
}
delayedGreet('Bob', 2000, function() {
console.log('Delayed callback executed!');
});
function fetchData(url) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data fetched');
}, 1000);
});
}
fetchData('https://example.com/data')
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
当有多个嵌套的回调函数时,代码会变得难以阅读和维护。
解决方法:
// 使用 Promise 避免回调地狱
function step1() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('Step 1 done'), 1000);
});
}
function step2() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('Step 2 done'), 1000);
});
}
step1()
.then(result1 => {
console.log(result1);
return step2();
})
.then(result2 => {
console.log(result2);
});
// 使用 async/await
async function runSteps() {
const result1 = await step1();
console.log(result1);
const result2 = await step2();
console.log(result2);
}
runSteps();
通过这些方法,可以有效管理和优化回调函数的使用,提高代码的可读性和可维护性。
领取专属 10元无门槛券
手把手带您无忧上云