了解 jquery 回调

Question

我很难理解 javascript 回调应该如何工作。我正在使用以下代码从 MySQL 数据库中获取值：

  $.post("getResults.php", { x: 100, y: 200},       
   function(arrayOfValues){  
      alert( arrayOfValues[2] )         
   }, 'json');

alert() 返回正确的值，并且按预期运行。但是，我不明白 arrayData[2] 的值如何传递或返回到我程序的其他部分（我所做的尝试没有奏效）。

我已经阅读了jquery help 和许多 SO 问题和答案，但我不明白回调是如何工作的。

在这种情况下，我希望我的主程序可以访问 arrayOfValues[2]。

Answer 1

$.post() 是异步（非阻塞）调用，这意味着函数立即返回（不等待服务器响应）并执行下一个javascript 代码。 当来自服务器的响应到达时，您的回调函数被调用，响应...

假设你想在一个 div 中显示内容：

$.post('url.php', {}, function(content) {
  $('#div_id').html(content);
});

// or shorter:
$('#div_id').load('url.php', {});

或者你可以拥有一个具有某种逻辑的对象，并将对象的方法注册为回调：

function MyHandler(msgElement) {
  var sum = 0;
  this.onSuccess = function(content) {
    sum = sum + content[0];
    if (sum > 100) {
      msgElement.html('Sum has reached 100 !');
    }
  };
  this.otherMethod = function() {
    alert('Current sum is:' + sum);
  };
}

var handler = new MyHandler($('#my_div'));

// do the request
$.post('url.php', {}, handler.onSuccess, 'json');

// you can call any method of handler object using global variable handler
// or passing a reference (handler object) to any other object
// notice, if you call this method immediately after sending the request,
// the sum var is likely to be 0, as the response has not arrived yet...
handler.otherMethod();

基本上，您有很多选择。因此，如果您需要更多信息，请具体说明您想要响应的内容...

Answer 2

var foo;

$.post("getResults.php", { x: 100, y: 200 }, function(data) {  
    foo = data;       
}, 'json');

响应数据将存储到foo 变量中。但是请注意，这是一个异步回调函数，当 HTTP 响应到达时会调用它。请务必了解，在 HTTP 响应到达且回调函数完成之前，您不能使用 foo 变量。

Answer 3

回调，让我试着用你能理解的方式解释一下。

• 首先，您需要了解如何将函数分配给变量而不执行。

这允许您传递函数并仅在需要时执行它们，这是我如何将函数传递给变量而不执行它的示例：

a = function(){}

这是一个小例子，也是最常见的，你可以像 a() 这样调用函数，添加 () 告诉函数执行。

• 现在您应该明白了，您可以将这些变量传递给另一个函数，但不能调用它们

以下示例向您展示了如何在执行时将函数传递给上述函数a。

b = function(){}
b(a);

• 下一步是能够创建匿名函数，这将允许您将函数分配给变量，同时传递给另一个函数

匿名函数在编写它时并未分配，而是在外部函数范围内解析时分配。

上面的内容我有点难以理解，但希望这个例子能解决它。

a(
    function(){}
);

上面和b(a)的例子一样，除了a现在是一个匿名函数，只赋值给b内的变量，即外层函数。

jQuer'ies API 严重依赖匿名函数，因为它易于使用并与 jQuery 核心和用户代码分离，用户不需要过度依赖 jQuery 的主要代码，而是通过回调来允许 jQuery而是连接到您的代码。

使用类似方法将数据传入和传出函数的函数示例如下：

JoinUser = function(Firstname,Lastname,callback)
{
     Fullname = Firstname + " " + Lastname;
     callback(Fullname);
}

JoinUser("Robert","Pitt",function(Fullname)
{
    alert(Fullname); //Robert Pitt
})

上面的例子只是大致展示了 jQuery 的风格是如何工作的，而不是回调的最重要的好处，那就是 Ajax。

Ajax 可以暂停一个 javascript 脚本，直到它的数据被接收到，例如：

Result = RequestPage("Contacts");

当 Ajax 看到这一行时，它必须等待 RequestPage 返回结果，因为进一步向下的编码预计需要这个值，所以我们必须等待在 JavaScript 继续之前从服务器返回数据，这可能会持续几秒钟并导致 UI 动作异常。

我们解决这个问题的方法是向函数发送回调，并告诉它在完成后调用，因为我想处理应用程序的其余部分。

RequestPage("Contacts",function(){});

所以现在 JavaScript 继续向下执行它需要的任务的页面，在 RequestPage 函数中，它的布局如下：

function RequestPage(page,callback)
{
    //..
        request.oncomplete = callback;
    //..
}

这样，您的应用程序的其余部分已经完成了其他任务，当结果准备就绪时，您可以从结果中更改 UI。

这也是我们使用加载器来复制工作状态的原因。

我希望您开始了解 jQuery 如何利用 javaScript 的这些因素，这将有助于您开发应用程序。

Answer 4

有很多方法可以处理返回的数据。

设置一个范围在该内联函数之外的变量并将值传递给它。

var result;

在回调中result = arrayData;

您还可以调用一个函数来对结果执行其他操作。