转自：
张小俊128：http://www.html-js.com/articl…
_luxiao：http://luxiao1223.blog.51cto….
js里的诠释:
A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.
字面上明白下来就是，回调就是一个函数的挪用历程。那末就从明白这个挪用历程最先吧。函数a有一个参数，这个参数是个函数b，当函数a实行完今后实行函数b。那末这个历程就叫回调。
实在中文也很好明白：回调，回调，就是转头挪用的意义。函数a的事前干完，转头再挪用函数b。
举个现实的例子：约会完毕后你送你女朋友回家，告别时，你肯定会说：“抵家了给我发条信息，我很忧郁你。”对不，然后你女朋友回家今后还真给你发了条信息。小伙子，你有戏了。
实在这就是一个回调的历程。你留了个函数b（要求女朋友给你发条信息）给你女朋友，然后你女朋友回家，回家的行动是函数a。她必需先回抵家今后，函数a的内容实行完了，再实行函数b，然后你就收到一条信息了。
这里必需清晰一点：函数b是你以参数情势传给函数a的，那末函数b就叫回调函数。
或许有人有疑问了:肯定要以参数情势传过去吗，我不可以直接在函数a内里挪用函数b吗？确切可以。求解中。
<解惑:假如你直接在函数a里挪用的话，那末这个回调函数就被限定死了。然则运用函数做参数就有下面的优点：当你a(b)的时刻函数b就成了回调函数，而你还可以a(c)这个时刻，函数c就成了回调函数。假如你写成了function a(){…;b();}就失去了变量的灵活性。>
下面用代码来证明我的明白。
<html>
<head>
<title>回调函数(callback)</title>
<script language="javascript" type="text/javascript">
function a(callback)
{
alert("我是parent函数a！");
alert("挪用回调函数");
callback();
}
function b(){
alert("我是回调函数b");
}
function c(){
alert("我是回调函数c");
}
function test()
{
a(b);
a(c);
}
</script>
</head>
<body>
<h1>进修js回调函数</h1>
<button onClick=test()>click me</button>
<p>应当能看到挪用了两个回调函数</p>
</body>
</html>
媒介：2013年11月20日
在Javascript中，函数是第一类对象，这意味着函数可以像对象一样根据第一类治理被运用。既然函数现实上是对象：它们能被“存储”在变量中，能作为函数参数被通报，能在函数中被建立，能从函数中返回。
由于函数是第一类对象，我们可以在Javascript运用回调函数。鄙人面的文章中，我们将学到关于回调函数的各个方面。回调函数多是在Javascript中运用最多的函数式编程技能，虽然在字面上看起来它们一向一小段Javascript或许jQuery代码，然则关于许多开辟者来说它任然是一个谜。在浏览本文以后你能相识如何运用回调函数。
回调函数是从一个叫函数式编程的编程范式中衍生出来的观点。简朴来说，函数式编程就是运用函数作为变量。函数式编程过去 – 以至是如今，照旧没有被广泛运用 – 它过去常被看作是那些受过特许练习的，大师级别的程序员的秘传技能。
荣幸的是，函数是编程的技能如今已被充足申明因而像我和你如许的平常人也能去轻松运用它。函数式编程中的一个主要技能就是回调函数。在背面内容中你会发现实现回调函数实在就和平常函数传参一样简朴。这个技能是云云的简朴致使于我常常感到很新鲜为何它常常被包括在报告Javascript高等技能的章节中。
什么是回调或许高阶函数
一个回调函数，也被称为高阶函数，是一个被作为参数通报给另一个函数（在这里我们把另一个函数叫做“otherFunction”）的函数，回调函数在otherFunction中被挪用。一个回调函数本质上是一种编程形式（为一个罕见题目建立的解决方案），因而，运用回调函数也叫做回调形式。
下面是一个在jQuery中运用回调函数简朴广泛的例子：
/注重到click要领中是一个函数而不是一个变量
//它就是回调函数
$("#btn_1").click(function() {
alert("Btn 1 Clicked");
});
正如你在前面的例子中看到的，我们将一个函数作为参数通报给了click要领。click要领会挪用（或许实行）我们通报给它的函数。这是Javascript中回调函数的典范用法，它在jQuery中广泛被运用。
下面是另一个Javascript中典范的回调函数的例子：
var friends = ["Mike", "Stacy", "Andy", "Rick"];
friends.forEach(function (eachName, index){
console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick
});
再一次，注重到我们讲一个匿名函数（没有名字的函数）作为参数通报给了forEach要领。
到目前为止，我们将匿名函数作为参数通报给了另一个函数或要领。在我们看更多的现实例子和编写我们本身的回调函数之前，先来明白回调函数是如何运作的。
回调函数是如何运作的？
由于函数在Javascript中是第一类对象，我们像看待对象一样看待函数，因而我们能像通报变量一样通报函数，在函数中返回函数，在其他函数中运用函数。当我们将一个回调函数作为参数通报给另一个函数是，我们仅仅通报了函数定义。我们并没有在参数中实行函数。我们并不通报像我们日常平凡实行函数一样带有一对实行小括号()的函数。
须要注重的很主要的一点是回调函数并不会立时被实行。它会在包括它的函数内的某个特定时候点被“回调”（就像它的名字一样）。因而，纵然第一个jQuery的例子以下所示：
//匿名函数不会再参数中被实行
//这是一个回调函数
$("#btn_1").click(function(){
alert("Btn 1 Clicked");
});
这个匿名函数稍后会在函数体内被挪用。纵然有名字，它依旧在包括它的函数内经由过程arguments对象猎取。
回调函数是闭包
都可以我们将一个毁掉函数作为变量通报给另一个函数时，这个毁掉函数在包括它的函数内的某一点实行，就好像这个回调函数是在包括它的函数中定义的一样。这意味着回调函数本质上是一个闭包。
正如我们所知，闭包可以进入包括它的函数的作用域，因而回调函数能猎取包括它的函数中的变量，以及全局作用域中的变量。
完成回调函数的基本原理
回调函数并不庞杂，然则在我们最先建立并运用毁掉函数之前，我们应当熟习几个完成回调函数的基本原理。
运用定名或匿名函数作为回调
在前面的jQuery例子以及forEach的例子中，我们运用了再参数位置定义的匿名函数作为回调函数。这是在回调函数运用中的一种广泛的把戏。另一种罕见的形式是定义一个定名函数并将函数名作为变量通报给函数。比以下面的例子：
//全局变量
var allUserData = [];
//平常的logStuff函数，将内容打印到控制台
function logStuff (userData){
if ( typeof userData === "string")
{
console.log(userData);
}
else if ( typeof userData === "object"){
for(var item in userData){
console.log(item + ": " + userData[item]);
}
}
}
//一个吸收两个参数的函数，背面一个是回调函数
function getInput (options, callback){
allUserData.push(options);
callback(options);
}
//当我们挪用getInput函数时，我们将logStuff作为一个参数通报给它
//因而logStuff将会在getInput函数内被回调（或许实行）
getInput({name:"Rich",speciality:"Javascript"}, logStuff);
//name:Rich
//speciality:Javascript
通报参数给回调函数
既然回调函数在实行时仅仅是一个平常函数，我们就可以给它通报参数。我们可以通报任何包括它的函数的属性（或许全局书讯给）作为回调函数的参数。在前面的例子中，我们将options作为一个参数通报给了毁掉函数。如今我们通报一个全局变量和一个当地变量：
//全局变量
var generalLastName = "Cliton"；
function getInput (options, callback){
allUserData.push (options);
//将全局变量generalLastName通报给回调函数
callback(generalLastName,options);
}
在实行之前确保回调函数是一个函数
在挪用之前搜检作为参数被通报的回调函数确切是一个函数，如许的做法是明智的。同时，这也是一个完成前提回调函数的最好时候。
我们来重构上面例子中的getInput函数来确保搜检是恰当的。
function getInput(options, callback){
allUserData.push(options);
//确保callback是一个函数
if(typeof callback === "function"){
//挪用它，既然我们已肯定了它是可挪用的
callback(options);
}
}
假如没有恰当的搜检，假如getInput的参数中没有一个回调函数或许通报的回调函数事实上并非一个函数，我们的代码将会致使运转毛病。
运用this对象的要领作为回调函数时的题目
当回调函数是一个this对象的要领时，我们必需转变实行回调函数的要领来保证this对象的上下文。不然假如回调函数被通报给一个全局函数，this对象要么指向全局window对象（在浏览器中）。要么指向包括要领的对象。
我们鄙人面的代码中申明：
//定义一个具有一些属性和一个要领的对象 //我们接着将会把要领作为回调函数通报给另一个函数
var clientData = {
id: 094545,
fullName "Not Set",
//setUsrName是一个在clientData对象中的要领
setUserName: fucntion (firstName, lastName){
//这指向了对象中的fullName属性
this.fullName = firstName + " " + lastName;
}
}
function getUserInput(firstName, lastName, callback){
//在这做些什么来确认firstName/lastName
//如今存储names
callback(firstName, lastName);
}
鄙人面你的代码例子中，当clientData.setUsername被实行时，this.fullName并没有设置clientData对象中的fullName属性。相反，它将设置window对象中的fullName属性，由于getUserInput是一个全局函数。这是由于全局函数中的this对象指向window对象。
getUserInput("Barack","Obama",clientData.setUserName);
console.log(clientData,fullName); //Not Set
//fullName属性将在window对象中被初始化
console.log(window.fullName); //Barack Obama
运用Call和Apply函数来保留this
我们可以运用Call或许Apply函数来修复上面你的题目。到目前为止，我们知道了每一个Javascript中的函数都有两个要领:Call 和 Apply。这些要领被用来设置函数内部的this对象以及给此函数通报变量。
call吸收的第一个参数为被用来在函数内部当作this的对象，通报给函数的参数被挨个通报（固然运用逗号离开）。Apply函数的第一个参数也是在函数内部作为this的对象，但是末了一个参数确是通报给函数的值的数组。
听起来很庞杂，那末我们来看看运用Apply和Call有何等的简朴。为了修复前面例子的题目，我将鄙人面你的例子中运用Apply函数：
//注重到我们增加了新的参数作为回调对象，叫做“callbackObj”
function getUserInput(firstName, lastName, callback. callbackObj){
//在这里做些什么来确认名字
callback.apply(callbackObj, [firstName, lastName]);
}
运用Apply函数准确设置了this对象，我们如今准确的实行了callback并在clientData对象中准确设置了fullName属性：
//我们将clientData.setUserName要领和clientData对象作为参数，clientData对象会被Apply要领运用来设置this对象
getUserInput("Barack", "Obama", clientData.setUserName, clientData);
//clientData中的fullName属性被准确的设置
console.log(clientUser.fullName); //Barack Obama
我们也可以运用Call函数，然则在这个例子中我们运用Apply函数。
允许多重回调函数
我们可以将不止一个的回调函数作为参数通报给一个函数，就像我们可以通报不止一个变量一样。这里有一个关于jQuery中AJAX的例子：
function successCallback(){
//在发送之前做点什么
}
function successCallback(){
//在信息被胜利吸收以后做点什么
}
function completeCallback(){
//在完成以后做点什么
}
function errorCallback(){
//当毛病发作时做点什么
}
$.ajax({
url:"http://fiddle.jshell.net/favicon.png",
success:successCallback,
complete:completeCallback,
error:errorCallback
});
“回调地狱”题目以及解决方案
在实行异步代码时，不管以什么递次简朴的实行代码，常常状况会变成许多层级的回调函数聚集致使代码变成下面的情况。这些乱七八糟的代码叫做回调地狱由于回调太多而使看懂代码变得异常难题。我从node-mongodb-native，一个适用于Node.js的MongoDB驱动中拿来了一个例子。这段位于下方的代码将会充足申明回调地狱：
var p_client = new Db('integration_tests_20', new Server("127.0.0.1", 27017, {}), {'pk':CustomPKFactory});
p_client.open(function(err, p_client) {
p_client.dropDatabase(function(err, done) {
p_client.createCollection('test_custom_key', function(err, collection) {
collection.insert({'a':1}, function(err, docs) {
collection.find({'_id':new ObjectID("aaaaaaaaaaaa")}, function(err, cursor) {
cursor.toArray(function(err, items) {
test.assertEquals(1, items.length);
// Let's close the db
p_client.close();
});
});
});
});
});
});
你应当不想在你的代码中碰到如许的题目，当你当你碰到了-你将会是否是的碰到这类状况-这里有关于这个题目的两种解决方案。
给你的函数定名并通报它们的名字作为回调函数，而不是主函数的参数中定义匿名函数。
模块化L将你的代码分开到模块中，如许你就可以随处一块代码来完成特定的事情。然后你可以在你的巨型运用中导入模块。
建立你本身的回调函数
既然你已完整明白了关于Javascript中回调函数的统统（我以为你已明白了，假如没有那末疾速的重读以便），你看到了运用回调函数是云云的简朴而壮大，你应当检察你的代码看看有无能运用回调函数的处所。回调函数将在以下几个方面协助你：
防止反复代码（DRY-不要反复你本身）
在你具有更多多功用函数的处所完成更好的笼统（依旧能坚持一切功用）
让代码具有更好的可维护性
使代码更轻易浏览
编写更多特定功用的函数
建立你的回调函数异常简朴。鄙人面的例子中，我将建立一个函数完成以下事情：读取用户信息，用数据建立一首通用的诗，而且迎接用户。这本来是个异常庞杂的函数由于它包括许多if/else语句而且，它将在挪用那些用户数据须要的功用方面有诸多限定和不兼容性。
相反，我用回调函数完成了增加功用，如许一来猎取用户信息的主函数便可以经由过程简朴的将用户全名和性别作为参数通报给回调函数并实行来完成任何使命。
简朴来说，getUserInput函数是多功用的：它能实行具有无种功用的回调函数。
//起首，建立通用诗的天生函数；它将作为下面的getUserInput函数的回调函数
function genericPoemMaker(name, gender) {
console.log(name + " is finer than fine wine.");
console.log("Altruistic and noble for the modern time.");
console.log("Always admirably adorned with the latest style.");
console.log("A " + gender + " of unfortunate tragedies who still manages a perpetual smile");
}
//callback，参数的末了一项，将会是我们在上面定义的genericPoemMaker函数
function getUserInput(firstName, lastName, gender, callback) {
var fullName = firstName + " " + lastName;
// Make sure the callback is a function
if (typeof callback === "function") {
// Execute the callback function and pass the parameters to it
callback(fullName, gender);
}
}
挪用getUserInput函数并将genericPoemMaker函数作为回调函数：
getUserInput("Michael", "Fassbender", "Man", genericPoemMaker);
// 输出
/* Michael Fassbender is finer than fine wine.
Altruistic and noble for the modern time.
Always admirably adorned with the latest style.
A Man of unfortunate tragedies who still manages a perpetual smile.
*/
由于getUserInput函数仅仅只担任提取数据，我们可以把恣意回调函数通报给它。比方，我们可以通报一个greetUser函数：
function greetUser(customerName, sex) {
var salutation = sex && sex === "Man" ? "Mr." : "Ms.";
console.log("Hello, " + salutation + " " + customerName);
}
// 将greetUser作为一个回调函数
getUserInput("Bill", "Gates", "Man", greetUser);
// 这里是输出
Hello, Mr. Bill Gates
我们挪用了完整相同的getUserInput函数，然则此次完成了一个完整差别的使命。
正如你所见，回调函数很奇异。纵然前面的例子相对简朴，设想一下能节约若干事情量，你的代码将会变得越发的笼统，这统统只须要你最先运用毁掉函数。斗胆勇敢的去运用吧。
在Javascript编程中回调函数常常以几种体式格局被运用，尤其是在当代web运用开辟以及库和框架中：
异步挪用（比方读取文件，举行HTTP要求，等等）
时候监听器/处理器
setTimeout和setInterval要领
平常状况：精简代码
完毕语
Javascript回调函数异常美好且功用壮大，它们为你的web运用和代码供应了诸多优点。你应当在有需求时运用它；或许为了代码的笼统性，可维护性以及可读性而运用回调函数来重构你的代码。
