什么是JavaScript回调函数以及如何使用它们

技术频道 - js技术

作者:admin 时间:2022-6-27 11:22:54 浏览:

在这篇文章中，我将通过一些例子来帮助你理解什么是 JavaScript 回调函数以及如何使用它们。你还可以参考以下一文，学习和使用JavaScript回调函数。

什么是回调函数？

在 JavaScript 中，函数是对象。我们可以将对象作为参数传递给函数吗？是的。

因此，我们也可以将函数作为参数传递给其他函数，并在外部函数内部调用它们。听起来很复杂？让我在下面的示例中展示这一点：

function print(callback) {  
    callback();
}

print() 函数将另一个函数作为参数并在内部调用它。这在 JavaScript 中是有效的，我们称之为“回调”。所以作为参数传递给另一个函数的函数是回调函数。

为什么我们需要回调函数？

JavaScript 按自上而下的顺序依次运行代码。但是，在某些情况下，代码在其他事情发生之后运行（或必须运行），而且不是按顺序运行的。这称为异步编程。

回调确保函数不会在任务完成之前运行，而是在任务完成后立即运行。它帮助我们开发异步 JavaScript 代码，并让我们远离问题和错误。

在 JavaScript 中，创建回调函数的方法是将其作为参数传递给另一个函数，然后在某事发生或某项任务完成后立即回调。

如何创建回调

为了理解我上面解释的内容，让我从一个简单的例子开始。我们想将一条消息记录到控制台，但它应该在 3 秒后出现。

const message = function() {  
    console.log("这条消息在3秒后显示");
}
 
setTimeout(message, 3000);

JavaScript 中有一个名为setTimeout的内置方法，它在给定时间段（以毫秒为单位）后调用函数或计算表达式。所以在这里，message函数在 3 秒后被调用。（1 秒 = 1000 毫秒）

换句话说，message函数是在某事发生后调用的（对于这个例子来说是在 3 秒之后），而不是之前。所以message函数是回调函数的一个例子。

匿名函数

我们可以直接在另一个函数内部定义一个函数，而不是调用它。它看起来像这样：

setTimeout(function() {  
    console.log("这条消息在3秒后显示");
}, 3000);

我们可以看到，这里的回调函数没有名字，在 JavaScript 中没有名字的函数定义被称为“匿名函数”。这与上面的示例执行完全相同的任务。

作为箭头函数的回调

如果你愿意，也可以编写与 ES6 箭头函数相同的回调函数，这是 JavaScript 中一种较新的函数类型：

setTimeout(() => { 
    console.log("这条消息在3秒后显示");
}, 3000);

事件

JavaScript 是一种事件驱动的编程语言。我们还使用回调函数进行事件声明。例如，假设我们希望用户点击一个按钮：

<button id="callback-btn">Click here</button>

这次我们只会在用户单击按钮时在控制台上看到一条消息：

document.queryselector("#callback-btn")
    .addEventListener("click", function() {    
      console.log("用户已经点击了按钮");
});

所以这里我们先用它的 id 选择按钮，然后我们用 addEventListener 方法添加一个事件监听器。它需要2个参数。第一个是它的类型，“click”，第二个参数是一个回调函数，它记录单击按钮时的消息。

上例显示，回调函数也用于 JavaScript 中的事件声明。

总结

回调在 JavaScript 中经常使用，希望这篇文章能帮助你了解它们的实际作用以及如何更轻松地使用它们。

相关文章