js中的回调函数的理解

一，常见的但是不是特别注意的回调方法。

1.1，ajax

$.ajax({
url:"test.json",
type: "GET",
data: {username:$("#username").val()},
dataType: "json",
beforSend:function(){
// 禁用按钮防止重复提交
$("#submit").attr({ disabled: "disabled" });
},
complete:function(msg){
//请求完成后调用的回调函数（请求成功或失败时均调用）
} ,
error:function(msg){
//请求失败时被调用的函数
} ,
Sucess:function(msg){
//请求成功后调用的回调函数
}
});

回调就是现在还不确定用的是哪个方法，只有当用到的时候，或者数据返回的时候我才知道用的哪个方法，在众多方法中选择一个。

1.2，onclick事件

$("#btn_1").click(function() {
alert("Btn 1 Clicked");
});

正如你在前面的例子中看到的，我们将一个函数作为参数传递给了click方法。click方法会调用（或者执行）我们传递给它的函数。这是Javascript中回调函数的典型用法，它在jQuery中广泛被使用。

1.3，foreach事件

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方法。

二，案例

2.1，案例一

如果你直接在函数a里调用的话，那么这个回调函数就被限制死了。但是使用函数做参数就有下面的好处：当你a(b)的时候函数b就成了回调函数，而你还可以a(c)这个时候，函数c就成了回调函数。如果你写成了function a(){...;b();}就失去了变量的灵活性。下面是代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="GBK" />
<title>回调函数(callback)</title>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
var f;
function d(){
alert("我是Jquery定义的函数d");
}
var e = function(){
alert("我也是Jquery定义的函数e");
}

function a(callback) {
alert("我是parent函数a！");
d();
if (typeof callback === "function"){
//alert(callback);
callback();
}
}
function b(){
alert("我是回调函数b");

d();
e();
f();
}
function c(){
alert("我是回调函数c");
d();
e();
f();
}
function test1() {
a(b);
}
function test2() {
a(c);
}
$(function(){
f = function(){
alert("我是回调函数f");
}
});
</script>
</head>
<body >
<h1>学习js回调函数</h1>
<button onClick=test1()>test a(b)</button>
<button onClick=test2()>test a(c)</button>
<p>应该能看到调用了两个回调函数</p>
<p > </p>
</body>
</html>

这个案例其实最好理解，就是用现在方法a调用的是一个函数，而我现在不知道这个函数是谁，因为它一直在变化的，所以我就定义了一个回调函数，当确定下来这个函数是谁的时候我把函数传进来，这时候就可以确定这个函数是谁了。

2.2，案例二。

再来看另一个案例

//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("Michael", "Fassbender", "Man", genericPoemMaker);

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");
}

/ 输出
/* 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函数，但是这次想完成一个完全不同的任务。

看下面的代码

unction 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

三，自己的理解

就是相同的方法，参数比变量一样，函数一样(在用同样的方法时候赋给的函数名字就是callback的函数名字)，但实际上函数名字是不一样的，就相当于变量名字是一样的，但是每次变量的内容是不一样的道理。

这时候传递什么样的函数就会输出什么样的结果。

$('#provinceCity_fu').click(function(){
var $this = $(this);
new Picker({
"title": '请选择地区',//标题(可选)
"defaultValue": $(this).text(),//默认值-多个以空格分开（可选）
"type": 3,//需要联动级数[1、2、3]（可选）
"data": cityData,//数据(必传)
"keys": {
"id": "Code",
"value": "Name",
"childData": "level"//最多3级联动
},//数组内的键名称(必传，id、text、data)
"callBack": function (val) {
//回调函数（val为选择的值）
$this.text(val);
}
});
});

这也就解释了上面的代码，当childData级数传递的不一样的时候其实调用的函数是不一样的返回的结果自然不一样，结果就可以出来1,2,3级联动不同的效果了。