ajax调用结果出来后如何返回函数的值？

Question

有点像这样：

function getfoo() {
  var foo = "";
  $.get("foofile.html", function (data) {
    foo = data;
  });
  return foo;
}

但是由于脚本是异步的，它会返回“”。这显然不是我想要的。

然后我尝试了这个：

function getfoo() {
  var foo = "";
  $.get("foofile.html", function (data) {
    foo = data;
  });
  for (;;) {
    if (foo != "") {
      return foo;
      break;
    }
  }
}

我希望它会起作用，但它没有。为什么不？有人可以提出解决方案吗？

Answer 1

您应该使用回调传递给函数并让它处理您的数据。

function getfoo(callback) {
  var foo = "";
  $.get("foofile.html", function (data) {
    callback(data);
    // do some other things
    // ...
  });
}

getfoo(function(data) {
   console.log(data);
});

Answer 2

在使用 ajax 时，您应该稍微不同地编写代码。您应该将调用者和被调用者逻辑分开。

假设你现有的代码是这样的

function getfoo() {
  var foo = "";
  $.get("foofile.html", function (data) {
    foo = data;
  });
  return foo;
}

function usefoo(){
  var data = getfoo();
  // do something with data
}

真的应该这样写

function getfoo() {
  var foo = "";
  $.get("foofile.html", function (data) {
    usefoo(data);
  });
}

function usefoo(data){
  // do something with data
}

Answer 3

ajax 的第一个“a”代表异步，因此您尝试做的事情有点违背 ajax 的哲学。但是可以使用阻塞请求，但.get 简化接口不支持，您必须使用.ajax 函数：

var foo = "hmmm";
$.ajax("jquery.js", {async:false, success:function(x){foo=x}});
alert(foo);

javascript的基本执行模型是基于事件和单线程的（有提供多线程能力的web worker，但是每个worker都生活在自己的地址空间中，不能与其他worker或与主线程共享任何内存.. . 所以从某种意义上说，它们更类似于进程而不是线程）。

在 Javascript 中，您不能在循环中“等待”其他事情发生，您的函数必须始终快速终止，可能会附加回调以在发生某些事情时再次调用。如果您创建一个循环，则 javascript 引擎将卡在该循环中，并且不允许进行其他处理（如果从 javascript 中可见）。例如：

// Warning: WRONG example... this won't work!
var foo = 0;
setTimeout(function(){foo = 1}, 100); // Set foo=1 after 100ms
while (foo == 0) ; // Wait for that to happen
alert(foo);

不会工作，因为在主代码路径结束之前，不允许浏览器引擎执行其他 javascript 代码（超时回调）。

这种基于事件的方法大大简化了编程（因为不需要锁定......总是只有一个线程在处理状态），但强制使用不同的流程设计来进行长时间操作。

只有一个执行线程这一事实也意味着，当您的 javascript 代码进行任何长时间的计算时，其他一切都会被阻止，并且浏览器看起来对用户没有响应。

这种无响应是为什么使用同步调用来检索资源被认为是一种不好的做法...从多个流中并发获取不同资源的艰巨工作已经由浏览器实现，但是您的 javascript 代码需要使用回调模型能够利用此功能。