理解jquery回调
我很难理解javascript回调应该如何工作。 我使用以下代码从MySQL数据库中获取值:
$.post("getResults.php", { x: 100, y: 200}, function(arrayOfValues){ alert( arrayOfValues[2] ) }, 'json');
alert()
返回正确的值,并按预期运行。 但是,我不明白如何将arrayData[2]
的值传递或返回到我的程序的其他部分(我尝试的尝试没有工作)。
我已经阅读了jquery帮助和大量的SO问题和答案,但我不明白回调是如何工作的。
在这种情况下,我希望我的主程序可以访问arrayOfValues [2]。
var foo; $.post("getResults.php", { x: 100, y: 200 }, function(data) { foo = data; }, 'json');
响应数据将存储到foo
变量中。 但请注意,这是一个异步回调函数,在HTTP响应到达时调用。 重要的是要理解, 在 HTTP响应到达并且回调函数完成之前,您不能使用foo
变量 。
$ .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();
基本上,你有很多选择。 因此,如果您需要更多信息,请指明您想要做什么回复……
回调,让我尝试以你能理解的方式解释它。
- 首先,您需要了解如何在不执行的情况下将函数分配给变量。
这允许你传递函数并只在你想要的时候执行它们,这是一个例子,我可以将函数传递给变量而不执行它:
a = function(){}
这是一个小例子,也是最常见的,你可以调用函数,如a()
添加()
告诉函数执行。
- 现在你应该明白,你可以将这些变量传递给另一个函数,而不是调用它们
下面的例子向您展示了如何在执行函数时将函数传递给上述函数a
。
b = function(){} b(a);
- 下一步是能够创建匿名函数,这些函数允许您在传递给另一个函数时为函数赋值
在写入时不指定匿名函数,但在外部函数作用域内解析时指定匿名函数。
以上我有点难以理解,但希望这个例子能够清除它。
a( function(){} );
以上与b(a)
示例相同,除了a
现在是匿名函数,并且仅分配给b
的变量,即外部函数。
jQuer’ies API在很大程度上依赖于匿名函数,因为它易于使用并创建与jQuery Core和用户代码的分离,用户不需要严重依赖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继续之前检查从服务器返回的数据,这可能是几秒钟并导致UIexception行为。
我们解决这个问题的方法是向函数发送一个回调并告诉它在完成时调用,因为我想处理其余的应用程序。
RequestPage("Contacts",function(){});
所以现在JavaScript继续在页面上执行它需要的任务,并且在RequestPage
函数中它将如下布局:
function RequestPage(page,callback) { //.. request.oncomplete = callback; //.. }
这样,应用程序的其余部分就完成了其他任务,当结果准备就绪时,您可以更改结果的用户界面。
这也是我们使用加载器复制工作状态的原因。
我希望您开始了解jQuery如何利用javaScript的这些因素,它将帮助您开发应用程序。
有许多方法可以处理返回的数据。
设置一个变量,其范围在该内联函数之外,并将值传递给它。
var result;
在callback result = arrayData;
您还可以调用函数来对结果执行其他操作。