搜索
首页web前端前端问答javascript什么叫回调函数
javascript什么叫回调函数Jun 29, 2021 pm 05:58 PM
javascript回调函数

在javascript中,回调函数就是一个被作为参数传递的函数。函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A,函数A就叫做回调函数;如果没有名称(函数表达式),就叫做匿名回调函数。

javascript什么叫回调函数

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

什么是回调函数(Callback)

在JavaScript中,函数是对象。 因此,函数可以将函数作为参数,并且可以由其他函数返回。 执行此操作的函数称为高阶函数。 作为参数传递的任何函数都称为回调函数。

回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式),就叫做匿名回调函数。

为什么我们需要回调?

出于一个非常重要的原因-JavaScript是一种事件驱动语言。这意味着JavaScript不会继续等待响应,而是会在侦听其他事件时继续执行。让我们看一个基本的例子:

function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();

如你所料,首先执行函数,然后执行第二函数,将以下内容记录到控制台:

// 1
// 2

到目前为止一切都很好。

但是,如果函数包含无法立即执行的某些代码怎么办? 例如,我们必须先发送请求然后等待响应的API请求? 为了模拟此动作,将使用setTimeout,它是一个JavaScript函数,将在设置的时间后调用该函数。 我们将功能延迟500毫秒以模拟API请求。 我们的新代码将如下所示:

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}
function second(){
  console.log(2);
}
first();
second();

现在了解setTimeout()的工作方式并不重要。重要的是,你看到我们把console.log(1)移到500毫秒延迟内。那么,当我们调用函数时会发生什么呢?

first();
second();
// 2
// 1

即使我们先调用了first()函数,我们在second()函数之后才打印了它的结果。

这并不是说JavaScript没有按照我们想要的顺序执行我们的函数,而是JavaScript在继续执行second()之前没有等待first()的响应。

那为什么给你看这个呢?因为你不能在一个函数后调用另一个另一个函数,而又希望它们以正确的顺序执行。回调是一种确保某些代码在其他代码已经完成执行之前不会执行的方法。

创建一个回调函数

好了,话不多说,让我们创建一个回调!

首先,打开您的Chrome开发者控制台(Windows:Ctrl + Shift + J)(Mac:Cmd + Option + J),然后在控制台中键入以下函数声明:

function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}

现在让我们添加回调-作为doHomework()函数中的最后一个参数,我们可以传入回调。然后在对doHomework()的调用的第二个参数中定义回调函数。

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

doHomework('math', function() {
  alert('Finished my homework');
});

可以看到,如果你在控制台中输入上述代码,则会收到两个alert:“starting homework”alert,然后是“finished homework”alert。

但是,并非总是必须在我们的函数调用中定义回调函数。它们可以在我们的代码的其他地方定义,如下所示:

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}
function alertFinished(){
  alert('Finished my homework');
}
doHomework('math', alertFinished);

此示例的结果与前面的示例完全相同,但是设置略有不同。我们可以看到,在doHomework()函数调用期间,我们已将alertFinished函数定义作为参数传递。

一个真实的例子

我们尝试调用Twitter的API。 向API发出请求时,必须等待响应,然后才能对该响应采取行动。 这是真实回调的一个很好的例子。 请求长这样:

T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // This is where the magic will happen
  } else {
    console.log(err);
  }
})

T.get意味着我们正在向Twitter发送获取请求

此请求中包含三个参数:“ search / tweets”(这是我们的请求的路由),params(这是我们的搜索参数)和一个匿名函数(即我们的回调)。

回调在这里很重要,因为我们需要等待服务器的响应才能继续执行代码。 我们不知道我们的API请求是否会成功,因此在通过get请求将参数发送到search/tweets后,我们等待。 一旦Twitter响应后,将调用我们的回调函数。 Twitter会向我们发送错误(错误)对象或响应对象。 在回调函数中,我们可以使用if()语句来确定我们的请求是否成功,然后对新数据采取相应措施。

【相关推荐:javascript学习教程

以上是javascript什么叫回调函数的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器