JavaScript 回调函数

2025年4月23日 | 阅读 4 分钟

在 JavaScript 中，回调函数是作为另一个函数的参数传递的函数，并在某些操作完成后执行。

简单来说，JavaScript 中的回调函数是在另一个函数执行完毕后执行的函数。在 JavaScript 中，回调非常重要，因为它们可以帮助我们在异步任务完成后执行代码。

在 JavaScript 中，创建回调非常容易。我们只需将回调函数作为参数传递给另一个函数，并在任务完成后立即调用它。回调函数在 JavaScript 中的主要用途是处理异步操作，例如注册事件监听器、从文件中获取或向文件插入数据等等。

示例

// function
function meet(name, callback) {
    console.log('Hello' + ' ' + name);
    callback();
}
// callback function
function callMe() {
    console.log('I am a callback function');
}
// passing function as an argument
meet('Rohit', callMe);

立即执行

输出

Hello Rohit
I am a callback function

为什么要使用回调函数？

在 JavaScript 中，回调至关重要，因为它们可以让我们管理异步任务的结果，而不会阻塞程序的执行。有一些异步任务，例如网络请求或数据库查询，需要时间才能完成。如果这些任务是同步的，那么程序将停止直到它们完成，这将导致糟糕的用户体验。

借助回调，我们可以在这些任务在后台运行时保持程序运行。当任务完成时，回调函数会处理结果。它确保程序保持响应，从而提升用户体验。

JavaScript 在单线程环境中运行，这意味着它一次只能执行一个命令。借助回调函数，我们可以管理异步操作，从而确保代码能够流畅运行，而无需等待任务完成。

JavaScript 中的回调是如何工作的？

在 JavaScript 中，代码执行是同步的。但是，有时我们需要延迟执行或等待任务完成才能继续执行下一个函数。

通过使用回调，您可以将一个稍后要执行的函数作为参数传递来实现此目的。

传递函数： 打算在操作后执行的函数作为参数传递给另一个函数。
执行回调： 主函数在正确的时间执行回调函数，这可能是在延迟之后、任务完成后或事件发生时。

示例

function fetchData(callback) {
  setTimeout(() => {
    const info = { id: 1, name: "Tom" };
    callback(info);
  }, 1000); 
}
fetchData((info) => {
  console.log("Info received:", info);
});

立即执行

输出

Info received: { id: 1, name: 'Tom' }

同步与异步回调

同步回调函数

在 JavaScript 中，当代码是同步的时，它会逐行从上到下运行。在这种情况下，操作一个接一个地发生，每个操作都等待前一个操作完成。

示例

function movieTime(a,done){    
    console.log(" Movie is at ", a);
    done();
}
function movieEnd(){
    console.log("Movie Ends")
}
movieTime(9,movieEnd);
console.log('done')

立即执行

输出

Movie is at 9
Movie Ends
Done

异步函数

在 JavaScript 中，异步函数不会逐行从上到下运行。相反，异步操作会注册一个回调函数，以便在完成后执行。这意味着 JavaScript 解释器不必等待异步操作完成，而可以在其运行时继续处理其他任务。

示例

console.log('start');
function greet(name, cb) {
   setTimeout(() => {
     cb(`Hello ${name}!`);
   }, 0);
}
console.log('before greet');
greet('Max', (greeting) => {
  console.log(greeting);
});
console.log('end');

立即执行

输出

start
before greet
end
Hello Max!