Use of callback functions in JavaScript

In JavaScript, the callback function is specifically defined as: function A is passed as a parameter (function reference) to another function B, and this function B executes function A. Let's just say that function A is called a callback function. If there is no Name (function expression), it is called an anonymous callback function.

In the actual application, can be applied, one method to get the data source, another method (callback function) can be displayed on the page through the data source, can be displayed according to the specific needs of the row, if more than one place to use this data source, you can write a different callback function, this function into the method.

Here, let's take a glance through the examples.

A small example of getting company information

1. Method of obtaining Company Information data source (parameter URL is access address, Paramsobj is passed parameter object, callback is callback function)

function getList (URL, paramsobj, callback) {        $.ajax ({            "Post",            Url:url,            "JSON",            Data:JSON.stringify ({                paramsObj:JSON.stringify (paramsobj)            }),            "Application/json; Charset-utf-8 ",            function  (data) {                callback (data);}}        );    

2. How to call data in the background

 Public classCompanycontroller:controller {//        //GET:/company/         PublicActionResult Index () {returnView (); } [HttpPost] PublicActionResult Getcompanylist (stringparamsobj) {JavaScriptSerializer Serializer=NewJavaScriptSerializer (); varItems = serializer.deserialize<company>(Paramsobj); List<Company> list =NewList<company>(); List. ADD (NewCompany {ID =1, Name ="Company One" }); List. ADD (NewCompany {ID =2, Name ="Company Two" }); List. ADD (NewCompany {ID =3, Name ="Company Three" }); returnJson (list); }    }

View Code

3, the callback function method, here write two can be used as a callback function (one for the table to display on the page, the other as a popup box)

 function   buildhtml (data) { var  strhtml = "" ;        strHTML  + = "<table>" ;  for  (var  i = 0; i < data.length; I            ++) {strhtml  + = <tr> " + = <td> "+ data[i].id +" </td> "; strHTML  + = <td> + data[i].            Name + "</td>" ;        strHTML  + = "</tr>" ;        } strhtml  + = "</table>" ;    $ ( "#divTable" 

function alerthtml (data) {        var strhtml = "";         + = "<table>"        ;  for (var i = 0; i < data.length; i++) {            + = "<tr>"            ; + = "<td>" + data[i].id + "</td>"            ; + = "<td>" + data[i]. Name + "</td>";             + = "</tr>"        ;        } + = "</table>";        alert (strhtml);    }

4. Page Call

$ (document). Ready (function () {        //get ();        varurl = "/company/getcompanylist"; varParamsobj = {id:3, Name: "CK" }; varcom =NewCompany (33, "123456"); Com.    Getcompany (URL, paramsobj);    }); functionCompany (id,name) { This. ID =ID;  This. Name =Name; } Company.prototype.GetCompany=function(URL, paramsobj) {getList (URL, paramsobj, buildhtml);    GetList (URL, paramsobj, alerthtml); }

View Code

Finally tidy up, the page all the code is as follows:

@{Viewbag.title= "Index";}<script src= "~/scripts/jquery-1.8.2.min.js" ></script><script type= "Text/javascript" >$ (document). Ready (function () {        //get ();        varurl = "/company/getcompanylist"; varParamsobj = {id:3, Name: "CK" }; varcom =NewCompany (33, "123456"); Com.    Getcompany (URL, paramsobj);    }); functionCompany (id,name) { This. ID =ID;  This. Name =Name; } Company.prototype.GetCompany=function(URL, paramsobj) {getList (URL, paramsobj, buildhtml);    GetList (URL, paramsobj, alerthtml); }        functiongetList (URL, paramsobj, callback) {$.ajax ({type:"Post", Url:url, DataType:"JSON", Data:JSON.stringify ({paramsObj:JSON.stringify (Paramsobj)}), Cont Enttype:"Application/json;charset-utf-8", Success:function(data) {callback (data);    }        }); }    functionbuildhtml (data) {varstrHTML = ""; strHTML+ = "<table>";  for(vari = 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); }    functionalerthtml (data) {varstrHTML = ""; strHTML+ = "<table>";  for(vari = 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>View Code
Use of callback functions in JavaScript