javascript - 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

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

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

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

对您的代码的一些注释，希望您能更好地理解:

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);
}