1

Question

我一直在阅读有关callBack函数的内容，并正在尝试使用它。但我没有看到它的好处。以下面的代码为例，我没有看到＃1和＃2之间的区别。而＃1似乎是毫无意义的

1

function serverConnect(callback){
//Connecting to server
var xmlhttp;
var getString;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

var url="server/topHouses.php";
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
        //Storing response from server, an array encoded by json    
        getString = $.parseJSON(xmlhttp.responseText);
        callback(getString);

    }
}

xmlhttp.send(); 
}

function doStuff(string){
//do stuff
}

serverConnect(doStuff);

2：

function serverConnect(){
//skip skip skip
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
    //Storing response from server, an array encoded by json    
    getString = $.parseJSON(xmlhttp.responseText);
    doStuff(getString);

}
}

function doStuff(string){
//do stuff
}

serverConnect();

Answer 1

对于你的例子来说，至少从我所看到的情况来看，并没有太大的好处。这里作为参数的回调方法可能很有用。

myFunction(successCallback)
{
    var url="server/topHouses.php";
    xmlhttp.open("POST", url, true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState==4 && xmlhttp.status==200) {
            if(!successCallback)
                // Some default behavior
            else
                successCallback($.parseJSON(xmlhttp.responseText));
        }
    };
}

通过允许您或其他开发人员覆盖成功行为，它可以为您的应用程序提供更大的灵活性，同时又不会牺牲方法以标准方式处理事物的便利性。

顺便提一下，如果您使用的是jQuery（如$.parseJSON电话所示），为什么使用xmlhttp代替$.ajax？

Answer 2

优点是可重用性。我们来看一个简化的例子。带回调的＃1允许你这样做：

function handleStatusResponse () {}
function handleUpdateStatusResponse () {}
function handleEmailResponse () {}

function serverConnect (query,callback) {

    // ajax stuff here

    callback(data)
}

serverConnect('GET_STATUS',handleStatusResponse );
serverConnect('UPDATE_STATUS',handleUpdateStatusResponse );
serverConnect('SEND_EMAIL',handleEmailResponse );

vs＃2没有回调，这需要你这样做：

function handleStatusResponse () {}
function handleUpdateStatusResponse () {}
function handleEmailResponse () {}

function serverConnectGetStatus (callback) {

    // ajax stuff here

    handleStatusResponse (data)
}

function serverConnectUpdateStatus (callback) {

    // ajax stuff here

    handleUpdateStatusResponse (data)
}

function serverConnectSendEmail (callback) {

    // ajax stuff here

    handleEmailResponse (data)
}

serverConnectGetStatus ();
serverConnectUpdateStatus();
serverConnectSendEmail();

虽然两种方法都封装了操作＃2，但是有很多重复的ajax代码。回调是将函数参数设置为变量的程序流 - 它们允许您推广算法。

使用回调函数与仅在函数内插入函数有什么好处

1

2：

2 个答案: