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、后台调用数据的方法

public class CompanyController : Controller
    {
        //
        // GET: /Company/

        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult GetCompanyList(string paramsObj)
        {
            JavaScriptSerializer Serializer = new JavaScriptSerializer();
            var items = Serializer.Deserialize<Company>(paramsObj);

            List<Company> list = new List<Company>();
            list.Add(new Company { ID = 1, Name = "公司一" });
            list.Add(new Company { ID = 2, Name = "公司二" });
            list.Add(new Company { ID = 3, Name = "公司三" });

            return Json(list);
        }

    }

3、回调函数的方法，这里写了两个可以作为回调函数（一个用于将table展示到页面上，另一个以弹出框的形式展现）

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

4、页面调用

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

最后整理一下，页面全部代码如下：

@{
    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="500px; height:300px;">

</div>