0

我一直在阅读有关回调函数的信息，并正在尝试使用它。但我看不到它的好处。以我下面的代码为例，我看不出#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();
4

2 回答 2

2

对于您的示例，至少从我所见，并没有太大的好处。在这里，回调方法作为参数可能很有用。

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?

于 2013-09-30T00:04:43.840 回答
1

优点是可重用性。让我们举一个简化的例子。#1 with callback 允许你这样做：

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 代码。回调是编程流程，就像函数参数对变量一样 - 它们允许您概括您的算法。

于 2013-09-30T02:10:07.017 回答