理解回调函数-优快云博客

本文通过案例讲解了JavaScript中回调函数的概念及应用，包括AJAX、onclick和foreach等常见场景中的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

假如你现在还在为自己的技术担忧，假如你现在想提升自己的工资，假如你想在职场上获得更多的话语权，假如你想顺利的度过35岁这个魔咒，假如你想体验BAT的工作环境，那么现在请我们一起开启提升技术之旅吧，详情请点击http://106.12.206.16:8080/qingruihappy/index.html

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

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