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请求尚未被执行完成。

第二个alert将在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);
}

Answer 2

尝试

var foo;

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

alert(foo);

jQuery变量无缘无故变得不确定

2 个答案: