理解jQuery回调函数
理解jQuery回调函数
我很难理解javascript回调函数应该如何工作。我正在使用以下代码从MySQL数据库中获取值：
$.post("getResults.php", { x: 100, y: 200},
function(arrayOfValues){
alert(arrayOfValues[2])
}, 'json');
alert()返回了正确的值，并且按预期工作。然而，我不明白如何将arrayData[2]的值传递或返回给程序的其他部分（我尝试过的方法都没有成功）。
我已经阅读了jquery帮助文档和许多SO的问题和答案，但我不明白回调函数是如何工作的。
在这种情况下，我希望能够通过我的主程序访问arrayOfValues[2]。
问题的出现原因是在使用异步回调函数时，无法立即使用回调函数中的变量。解决方法是等待HTTP响应到达并且回调函数执行完毕。
当响应到达时，如何知道？我意识到问题的根源是在返回值之前使用它。
是的，我明白那就是你的问题 🙂 有异步函数的整个目的就是能够在未来的某个未知时刻执行代码。你不知道响应何时到达，这就是你首先使用异步回调的原因。说到这里，你现在有多种选择。例如，你可以通过延迟代码等待foo变量被填充。
嗯嗯，所以如果我这样组织代码： $.ajax({ type:"POST",url: "getLatLongv2.php", data:{ latUser: latArrayVal, longUser: longArrayVal}, async: false, success: function(arrayData){ alert(arrayData[2]); arrayValue = arrayData[2];}, dataType:'json' });这样做可以吗？
这真的取决于你想如何处理响应数据。你能详细说明一下吗？
理解jQuery回调函数
$.post()是异步（非阻塞）调用，这意味着该函数立即返回（不等待服务器响应），然后执行下一个javascript代码。
当服务器的响应到达时，将调用您的回调函数，并传递响应...
假设您想在一个div中显示内容：
$.post('url.php', {}, function(content) {
$('#div_id').html(content);
});
// 或者更简短地：
$('#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'));
// 发送请求
$.post('url.php', {}, handler.onSuccess, 'json');
// 您可以使用全局变量handler调用handler对象的任何方法
// 或者将引用（handler对象）传递给任何其他对象
// 请注意，如果在发送请求后立即调用此方法，
// sum变量很可能为0，因为响应尚未到达...
handler.otherMethod();
基本上，您有很多选择。所以如果您需要更多信息，请明确指出您想要响应的具体内容...
谢谢您的回答。我想做的是将数组arrayData设置为我以后可以在javascript中访问的值。所以，如果我写下this.onSuccess = function(arrayData){a = arrayData[2]; return x }，我能否在其他地方访问x？
回调（this.onSuccess函数）在响应到达时由浏览器调用，所以返回任何值是没有意义的-您无法访问它。您是否阅读了我的代码？第二个示例正在做您需要的事情-通过闭包访问sum变量。然后，任何其他MyHandler的函数方法也可以访问此sum变量...查看我的更新的答案，我添加了otherMethod来演示这一点...
理解jQuery回调函数
回调函数，让我试着用一种你能理解的方式来解释一下。
首先，你需要理解如何将函数分配给一个变量而不执行它。
这样，你就可以传递函数并在需要时才执行它。下面是一个例子，展示了如何将函数传递给一个变量而不执行它：
a = function(){}
这是一个简单的例子，也是最常见的用法。你可以像a()这样调用函数，加上()表示执行函数。
现在，你应该明白可以将这些变量传递给另一个函数，但不调用它们。
下面的例子展示了如何将一个函数传递给上面的函数a并执行它。
b = function(){}
b(a);
下一步是能够创建匿名函数，这样你就可以将一个函数分配给一个变量并传递给另一个函数。
匿名函数在编写时没有被赋值，而是在外部函数的范围内解析时才被赋值。
上面的例子可能有点难以理解，但希望这个例子可以澄清一些。
a(
function(){}
);
上面的例子与b(a)的例子类似，只是a现在是一个匿名函数，并且只在b中（外部函数）被赋值。jQuery的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返回结果，因为下面的代码预期需要这个值，所以我们必须等待数据从服务器返回，这可能需要几秒钟，并导致UI的异常行为。
我们解决这个问题的方法是发送一个回调函数到函数中，并告诉它在完成时调用，因为我想要继续处理应用程序的其余部分。
RequestPage("Contacts",function(){});
现在JavaScript继续向下执行，执行它需要的任务，在RequestPage函数中，代码布局如下：
function RequestPage(page,callback)
{
//..
request.oncomplete = callback;
//..
}
这样，你的应用程序的其余部分已经完成了其他任务，当结果准备好时，你可以根据结果改变UI。
这也是为什么我们使用加载器来模拟工作状态。
希望你开始理解jQuery如何利用JavaScript的这些因素，并帮助你开发应用程序。