JavaScript：Ajax 请求后的全局变量答案

【问题标题】：JavaScript: Global variables after Ajax requests [duplicate]JavaScript：Ajax 请求后的全局变量
【发布时间】：2011-03-14 10:26:18
【问题描述】：

这个问题相当简单和技术性：

var it_works = false;

$.post("some_file.php", '', function(data) {

     it_works = true;

});

alert(it_works); # false (yes, that 'alert' has to be here and not inside $.post itself)

我想要实现的是：

alert(it_works); # true

有没有办法做到这一点？如果不能，$.post() 能否返回一个值以应用于it_works？

【问题讨论】：

见stackoverflow.com/questions/133310/…

标签： javascript jquery ajax global synchronous

【解决方案1】：

看来您的问题只是一个并发问题。 post 函数接受一个回调参数来告诉您帖子何时完成。您不能像这样在全局范围内发出警报并期望帖子已经完成。您必须将其移至回调函数。

【讨论】：

【解决方案2】：

您所期望的是同步（阻塞）类型的请求。

var it_works = false;

jQuery.ajax({
  type: "POST",
  url: 'some_file.php',
  success: function (data) {
    it_works = true;
  }, 
  async: false // <- this turns it into synchronous
});

// Execution is BLOCKED until request finishes.

// it_works is available
alert(it_works);

默认请求是异步（非阻塞），这意味着浏览器不会等待它们按顺序完成继续其工作。这就是您的警报得到错误结果的原因。

现在，使用jQuery.ajax，您可以选择将请求设置为同步，这意味着脚本只会在请求完成后继续运行。

推荐方法是重构您的代码，以便数据在请求完成。这是首选，因为阻塞执行意味着阻塞 UI，这是不可接受的。这样做：

$.post("some_file.php", '', function(data) {
    iDependOnMyParameter(data);
});

function iDependOnMyParameter(param) {
    // You should do your work here that depends on the result of the request!
    alert(param)
}

// All code here should be INDEPENDENT of the result of your AJAX request
// ...

异步编程稍微复杂，因为结果发出请求的过程被封装在一个函数中，而不是跟随请求语句。但用户体验的实时行为可能显着更好，因为他们不会看到缓慢的服务器或缓慢的网络导致浏览器就像它已经崩溃一样。同步编程是不尊重 并且不应被雇用在人们使用的应用程序中。

道格拉斯·克罗克福德 (YUI Blog)

【讨论】：

但请注意，如果some_file.php 执行大量（昂贵）操作，这将扼杀可用性。
@Felix 是的，但在某些情况下同步 I/O 是必不可少的。这是一个不应该被过度使用的工具。最好避免，有人可能会说。
并且请注意问题是alert has to be here not inside. Is there a way to do that?
@galambalazs : 同步请求已被弃用，标准知道使用它们会引发错误。
Chrome 控制台消息：“主线程上的同步 XMLHttpRequest 已被弃用，因为它会对最终用户的体验产生不利影响。”

【解决方案3】：

AJAX 代表异步 JavaScript 和 XML。因此，发送到服务器的帖子与函数的其余部分不同步。试试这样的代码（它只是将速记 $.post 分解为更长的 $.ajax 调用并添加 async 选项）。

var it_works = false;

$.ajax({
  type: 'POST',
  async: false,
  url: "some_file.php",
  data: "",
  success: function() {it_works = true;}
});

alert(it_works);

希望这会有所帮助！

【讨论】：

【解决方案4】：

您的代码失败的原因是post() 将向服务器发起asynchronous 请求。这对您来说意味着post() 立即返回，不是在请求完成后，就像您所期望的那样。

那么，您需要的是同步请求并阻塞当前线程，直到请求完成。因此，

var it_works = false;

$.ajax({
  url: 'some_file.php',
  async: false,  # makes request synchronous
  success: function() {
    it_works = true;
  }
});

alert(it_works);

【讨论】：