jQuery变量无缘无故变得未定义

Question

我有以下代码，我想将文件bar.txt的内容保存在变量foo中：

var foo;

jQuery.get('http://example.com/bar.txt', function(data) {
     foo = data;
     alert(foo);
});        

alert(foo);

问题显然是，在 jQuery 函数结束后，变量变得未定义（即使它被声明为 在该范围之外）。第一个alert(foo) 可以正常显示文件的内容，但第二个什么也不显示。

谁能告诉我这里发生了什么？

Answer 1

试试

var foo;

jQuery.get('http://example.com/bar.txt', function(data) {
     window.foo = data;
     alert(foo);
});        

alert(foo);

Answer 2

这就是异步编程的工作原理。 $.get 函数在调用回调处理程序时“结束”，而不是按照代码以线性方式结束。

当您运行此代码时将触发的“第一个”alert() 是您在最后一行调用的那个（在 $.get 处理程序之外），此时 ajax 请求尚未完成。

第二个alert 将在 ajax 完成时发生（在 $.get 处理程序内），并将显示您分配给变量的数据，来自处理程序参数。

您的代码中的一些 cmets，希望您能更好地理解：

var foo; // foo is now undefined

jQuery.get('http://example.com/bar.txt', function(data) {
     // the code in this handler will be executed after the ajax is complete
     foo = data;
     alert(foo); // foo is now the contents of bar.txt, this will happen last
});        

alert(foo); // foo is still undefined, and this alert happens first

如果您需要一个关于如何“重用” foo 变量的示例，您可以对它进行不同的编程：

var foo;

jQuery.get('http://example.com/bar.txt', function(data) {
     foo = data;
     onData();
});        

function onData() {
    alert(foo);
}