前端JS入门教程—JavaScript 回调函数

爱前端-企业级实战型全栈大前端人才培养，只专注前端培训，前端教育我们更专业！

回调函数并不是一种新函数，而是函数的一种使用方式。

应用十分广泛，甚至当我们还不知道回调函数这个概念的时候，已经在代码中应用它。

首先看一段代码实例：

function callback(){
  console.log("爱前端");
}
setTimeout(callback, 2000);

代在两秒之后打印出字符串"爱前端"，callback被用作回调函数。

代码是不是非常的简单，由此可能会导致初学者根本就没有意识正在应用回调函数。

回调函数概念十分简单，很多时候由于"回调函数（callback）"这个貌似高大上的名字产生一些"恐惧感"。

一.回调函数概念：

什么是回调函数，英文文档介绍如下：

A callback is a function that is passed as an argument to 
another function and is executed after its parent function has completed.

翻译成汉语大致意思是，回调函数作为参数传递给另一个函数，当主体函数执行完毕后，再去执行回调函数。

通俗的说，就是一个函数作为参数传递给另一个函数，当某个事件发生后，触发回调函数的执行。

现在对前面的代码做一下分析：

（1）.将函数callback作为参数传递给setTimeout函数。

（2）.callback执行的时机是setTimeout函数执行后的2秒。

如果再通俗一点，可以从它的名字"回调函数"来理解记忆，回调函数就是先把函数准备好，回头时机到了再调用。

上述理解方式好像有点牵强附会，但是对于理解记忆可能有所帮助。

二.传递的是函数对象：

一定要注意，传递的是函数对象。

代码如下：

function callback(){
  console.log("爱前端");
}
setTimeout(callback(), 2000);

上述代码中，setTimeout第一个参数传递的不是callback函数对象，而是callback函数的返回值。由于callback的返回值是undefined，自然就会报错。

如果callback函数的返回值是一个函数对象，那么就没什么问题了。

代码修改如下：

function callback(){
  return function(){
    console.log("爱前端");
  }
}
setTimeout(callback(), 2000);

上述代码依然会在两秒后打印出"爱前端"。

因为callback返回一个函数对象，所以实质上给setTimeout传递的依然是一个函数对象。

---

爱前端——企业级实战型全栈大前端人才培养，只专注前端培训，前端教育我们更专业！冲击月薪17K！

专注全栈大前端，爱前端整理了一批2019年最新WEB前端教学视频，不论是零基础想要学习前端还是学完在工作想要提升自己，这些资料都会给你带来帮助，从HTML到各种框架，帮助所有想要学好前端的同学，学习规划、学习路线、学习资料、问题解答。只要加入全栈大前端学习交流Q群：137503198，即可免费获取。
点击链接加入群聊【web前端技术学习交流群】