• 24小时服务热线:400-088-1128

当前位置 南顺网络>> 知识拓展

javaScript的回调函数

什么是回调函数

简单来说,回调函数就是:只有等另一个函数执行完了才可以执行的函数。

复杂点说,在JavaScript中,函数都是对象, 因此在函数中可以将函数作为参数传递,也可以作为返回值;这样的函数也称为高阶函数,任何一个将函数作为参数传递的函数都称为回调函数。

话不多说,直接看例子吧。

为什么需要回调

最重要的一个原因就是JavaScript是事件驱动语言,这意味着JavaScript在监听其他事件时会持续执行而不是在执行前一直等待响应,看下面这个例子:

function first() {

  console.log(1);

}


function second() {

  console.log(2)

}


first();

second();


如你所料,first函数首先被执行,second函数其次被执行 ——打印结果如下:

// 1

// 2


现在看来没什么毛病

但是,当first函数包含了一些不能立马被执行的代码时会怎样呢?比如,当我们发送了一个需要等待响应的API请求时。我们将用setTimeout(一个在设置了指定时间之后调用函数的js内置方法)来模拟这个操作,我们把函数延迟500ms执行来模拟API请求,新代码如下:

function first() {

  setTimeout(function(){

     console.log(1);

  }, 500)

}


function second() {

  console.log(2)

}


first();

second();


现在明不明白setTimeout的工作原理不重要,重要的是你看到我们把console.log(1)放到了500ms的延迟内,那现在调用函数会发生什么呢?

first();

second();

// 2

// 1


虽然我们先调用了first()函数,但是其结果却在second()函数之后打印出来。

并不是JavaScript没有按照我们想要的顺序执行,而且Javascript没有等到first函数响应就已经往下执行second()函数了。

为什么看到的是这个结果呢?因为你不可能一个一个调用函数且希望它们按序执行,回调函数是一个能让某些代码在其他代码执行完成前不会被执行的方法。

创建一个回调函数

话不多说,秀代码!

首先,打开chrome浏览器的console界面(Windows:ctrl + shift + j,Mac:cmd + option + j)并输入下面的函数声明:

function doHomework(subject) {

  alert(`Starting my ${subject} homework`)

}


上面我们创建了一个doHomework函数,这个函数需要传入一个科目参数,在控制台输入以下代码调用该函数:

doHomework('math'); // Alerts:Starting my math homework.


现在来添加一个回调——作为doHomework的最后一个参数我们用callback关键字来传递,然后在调用doHomework的第二个参数中定义回调函数的第二个参数。

function doHomework(subject, callback) {

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

  callback();

}

doHomework('math', function() {

  alert('Finished my homework');

});


如果你在控制台输入了上面那些代码你会依次看到两个警示框弹出,starting homework 在finished homework之前。

其实回调函数没必要每次都在调用函数时声明,可以 在其他地方声明,比如:

function doHomework(subject, callback) {

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

  callback();

}

function alertFinished(){

  alert('Finished my homework');

}

doHomework('math', alertFinished);


这个例子的结果和上面那个例子是一样的,只是设置的不一样,在调用doHomework时我们把alertFinished函数名作为参数传递了。