JavaScript中回调函数的使用

在JavaScript中，回调函数具体的定义为：函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数。

在实际应用中，可以这么应用，一个方法进行获取数据源，另一个方法（回调函数）可以通过数据源在页面上进行展示，可以根据具体的需求进行展示就行，如果多个地方用到这个数据源，可以写不同的回调函数，将此函数传入这个方法中即可。

来，咱们通过实例可以一目了然

获取公司信息的小例子

1、获取公司信息数据源的方法（参数 url 为访问的地址，paramsObj为传递的参数对象，callback 为回调函数）

function getList(url, paramsObj, callback) {
$.ajax({
type: "Post",
url: url,
dataType: "json",
data: JSON.stringify({
paramsObj: JSON.stringify(paramsObj)
}),
contentType: "application/json;charset-utf-8",
success: function (data) {
callback(data);
}
});
}

2、后台调用数据的方法

@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {
//get();

var url = "/Company/GetCompanyList";
var paramsObj = { ID: 3, Name: "ck" };

var com = new Company(33, "123456");
com.GetCompany(url, paramsObj);
});

function Company(ID,Name)
{
this.ID = ID;
this.Name = Name;
}
Company.prototype.GetCompany = function (url, paramsObj) {

getList(url, paramsObj, buildHtml);

getList(url, paramsObj, alertHtml);
}

function getList(url, paramsObj, callback) {
$.ajax({
type: "Post",
url: url,
dataType: "json",
data: JSON.stringify({
paramsObj: JSON.stringify(paramsObj)
}),
contentType: "application/json;charset-utf-8",
success: function (data) {
callback(data);
}
});
}

function buildHtml(data) {
var strHtml = "";
strHtml += "<table>";
for (var i = 0; i < data.length; i++) {
strHtml += "<tr>";
strHtml += "<td>" + data[i].ID + "</td>";
strHtml += "<td>" + data[i].Name + "</td>";
strHtml += "</tr>";
}
strHtml += "</table>";

$("#divTable").html(strHtml);
}

function alertHtml(data) {
var strHtml = "";
strHtml += "<table>";
for (var i = 0; i < data.length; i++) {
strHtml += "<tr>";
strHtml += "<td>" + data[i].ID + "</td>";
strHtml += "<td>" + data[i].Name + "</td>";
strHtml += "</tr>";
}
strHtml += "</table>";

alert(strHtml);
}

</script>

<h2>Index</h2>

<div id="divTable" style="width:500px; height:300px;">

</div>

View Code