现实生活中的例子

这里有一个真实的例子，嗯，我自己的生活。

当我下午5点结束我的工作时，我的待办事项清单上有很多事情:

打电话给兽医要我的狗的检查结果。 遛狗。 处理我的税务问题。 洗碗。 回复私人邮件。 洗衣服。

当我打电话给兽医时，我接到了一个接待员的电话。接待员告诉我，我需要等待兽医，这样兽医就可以向我解释测试结果。接待员想让我等一下，直到兽医准备好。

你对此有什么反应?我知道我的工作多么低效!所以我向接待员提议，当兽医准备好谈话时，他让兽医给我回个电话。这样，我就不用等电话了，我可以做其他的事情。等兽医准备好了，我就可以把其他的事情暂时搁置，和她谈谈。

它和软件有什么关系

我是单螺纹的。我一次只能做一件事。如果我是多线程的，我将能够并行处理多个任务，但不幸的是，我不能这样做。

如果回调不是一个东西，当我遇到异步任务时，它会阻塞。如。当我打电话给兽医时，兽医需要大约15分钟来完成她正在做的事情，然后她才能和我说话。如果没有回调，我在这15分钟内就会被屏蔽。我就只能坐着等，而不能做其他的工作。

下面是没有回调的代码的样子:

function main() {
  callVet();
  // blocked for 15 minutes
  walkDog();
  doTaxes();
  doDishes();
  answerPeronalEmails();
  doLaundry();
}

现在用回调:

function main() {
  callVet(function vetCallback(vetOnThePhoneReadyToSpeakWithMe) {
    talkToVetAboutTestResults(vetOnThePhoneReadyToSpeakWithMe);
  });
  walkDog();
  doTaxes();
  doDishes();
  answerPeronalEmails();
  doLaundry();
}

更一般地说，当您处于单线程执行环境中，并且有某种异步任务时，您可以使用回调以更合乎逻辑的顺序执行事情，而不是让该任务阻塞您的单线程。

一个很好的例子是，如果您有一些前端代码需要发出ajax请求。如。如果您有一个显示用户信息的仪表板。下面是它如何在没有回调的情况下工作。用户将立即看到导航栏，但他们必须等待一段时间才能看到边栏和页脚，因为ajax请求getUser需要一段时间(作为经验法则，网络被认为是很慢的)。

function main() {
  displayNavbar();
  const user = getUser();
  // wait a few seconds for response...
  displayUserDashboard(user);
  displaySidebar();
  displayFooter();
}

现在用回调:

function main() {
  displayNavbar();
  getUser(function (user) {
    displayUserDashboard(user);
  });
  displaySidebar();
  displayFooter();
}

通过利用回调，我们现在可以在ajax请求的响应返回给我们之前显示边栏和页脚。这就好比我对接待员说:“我不想在电话上等15分钟。兽医准备好和我谈谈的时候给我回电话，与此同时，我会继续做我待办事项清单上的其他事情。”在现实生活中，你可能应该更优雅一些，但在编写软件时，你可以对CPU非常粗鲁。

你觉得不舒服，所以去看医生。他检查了你的身体，认为你需要一些药物治疗。他开了一些药，并把处方打电话到你当地的药店。你回家吧。稍后，你的药房打电话告诉你，你的处方已经准备好了。你去捡吧。

应用程序通常需要根据其上下文/状态执行不同的功能。为此，我们使用一个变量来存储关于要调用的函数的信息。根据需要，应用程序将使用要调用的函数的信息来设置这个变量，并使用相同的变量来调用该函数。

在javascript中，示例如下。在这里，我们使用方法参数作为变量，我们存储关于函数的信息。

function processArray(arr, callback) {
    var resultArr = new Array(); 
    for (var i = arr.length-1; i >= 0; i--)
        resultArr[i] = callback(arr[i]);
    return resultArr;
}

var arr = [1, 2, 3, 4];
var arrReturned = processArray(arr, function(arg) {return arg * -1;});
// arrReturned would be [-1, -2, -3, -4]

将方法看作是将任务交给同事。一个简单的任务可能如下:

Solve these equations:
x + 2 = y
2 * x = 3 * y

你的同事勤奋地计算了一下，并给出了以下结果:

x = -6
y = -4

但是你的同事有一个问题，他并不总是理解符号，比如^，但是他通过它们的描述理解它们。如指数。每次他找到其中一个，你就会得到以下信息:

I don't understand "^"

这就要求你在向你的同事解释完这个角色的含义后，再重写一遍你的整个指令集，而他并不总是在问题之间记得。而且他也很难记住你的建议，比如直接问我。然而，他总是尽可能地遵循你的书面指示。

你想到了一个解决方案，你只需在所有的指令中添加以下内容:

If you have any questions about symbols, call me at extension 1234 and I will tell you its name.

现在，无论何时他有问题，他都会打电话问你，而不是给你一个糟糕的回复，让整个过程重新开始。

如何用简单的英语解释回调?

简单地说，回调函数就像一个Worker，当他完成一个任务时，他就会“回调”给他的Manager。

它们与从一个函数调用另一个函数有什么不同 从调用函数中获取一些上下文?

的确，您正在从另一个函数调用一个函数，但关键是回调被视为对象，因此您可以根据系统的状态(如策略设计模式)更改要调用的函数。

如何向新手程序员解释它们的强大功能?

在需要从服务器获取数据的ajax风格网站中，可以很容易地看到回调的强大功能。下载新数据可能需要一些时间。如果没有回调，在下载新数据时，整个用户界面将“冻结”，或者您将需要刷新整个页面而不仅仅是其中的一部分。使用回调函数，您可以插入“现在正在加载”的图像，并在加载后用新数据替换它。

一些没有回调的代码:

function grabAndFreeze() {
    showNowLoading(true);
    var jsondata = getData('http://yourserver.com/data/messages.json');
    /* User Interface 'freezes' while getting data */
    processData(jsondata);
    showNowLoading(false);
    do_other_stuff(); // not called until data fully downloaded
}

function processData(jsondata) { // do something with the data
   var count = jsondata.results ? jsondata.results.length : 0;
   $('#counter_messages').text(['Fetched', count, 'new items'].join(' '));
   $('#results_messages').html(jsondata.results || '(no new messages)');
}

回调函数:

下面是一个回调的例子，使用jQuery的getJSON:

function processDataCB(jsondata) { // callback: update UI with results
   showNowLoading(false);
   var count = jsondata.results ? jsondata.results.length : 0;
   $('#counter_messages').text(['Fetched', count, 'new items'].join(' '));
   $('#results_messages').html(jsondata.results || '(no new messages)');
}

function grabAndGo() { // and don't freeze
    showNowLoading(true);
    $('#results_messages').html(now_loading_image);
    $.getJSON("http://yourserver.com/data/messages.json", processDataCB);
    /* Call processDataCB when data is downloaded, no frozen User Interface! */
    do_other_stuff(); // called immediately
}

关闭:

通常，回调需要使用闭包从调用函数访问状态，这就像Worker在完成任务之前需要从Manager获取信息一样。要创建闭包，你可以内联函数，这样它就可以看到调用上下文中的数据:

/* Grab messages, chat users, etc by changing dtable. Run callback cb when done.*/
function grab(dtable, cb) { 
    if (null == dtable) { dtable = "messages"; }
    var uiElem = "_" + dtable;
    showNowLoading(true, dtable);
    $('#results' + uiElem).html(now_loading_image);
    $.getJSON("http://yourserver.com/user/"+dtable+".json", cb || function (jsondata) {
       // Using a closure: can "see" dtable argument and uiElem variables above.
       var count = jsondata.results ? jsondata.results.length : 0, 
           counterMsg = ['Fetched', count, 'new', dtable].join(' '),
           // no new chatters/messages/etc
           defaultResultsMsg = ['(no new ', dtable, ')'].join(''); 
       showNowLoading(false, dtable);
       $('#counter' + uiElem).text(counterMsg);
       $('#results'+ uiElem).html(jsondata.results || defaultResultsMsg);
    });
    /* User Interface calls cb when data is downloaded */

    do_other_stuff(); // called immediately
}

用法:

// update results_chatters when chatters.json data is downloaded:
grab("chatters"); 
// update results_messages when messages.json data is downloaded
grab("messages"); 
// call myCallback(jsondata) when "history.json" data is loaded:
grab("history", myCallback); 

关闭

最后，这里是Douglas Crockford对闭包的定义:

函数可以在其他函数内部定义。内部函数可以访问外部函数的变量和参数。如果对内部函数的引用仍然存在(例如，作为回调函数)，则外部函数的变量也仍然存在。

参见:

http://javascript.crockford.com/survey.html http://api.jquery.com/jQuery.when/ http://api.jquery.com/jQuery.getJSON/ http://github.com/josher19/jQuery-Parse

您有一些想要运行的代码。通常，当你调用它时，你会等待它在你继续之前完成(这可能会导致你的应用程序变灰/产生游标的旋转时间)。

另一种方法是并行运行此代码并继续您自己的工作。但是，如果原始代码需要根据它所调用的代码的响应做不同的事情，该怎么办?在这种情况下，您可以传递您希望它在完成时调用的代码的名称/位置。这是一个“回电”。

正常代码:询问信息->处理信息->处理结果->继续做其他事情。

使用回调:Ask for Information->Process Information->继续执行其他操作。在稍后的某个点->处理处理的结果。