jquery - How to return the value of a function after the result of an ajax call has come?

Question

Sort of like this:

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

But then since the script is asynchronous, it will return "". That's obviously not what I want.

So then I tried this:

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

And I expected that to work, but it didn't. Why not? And can someone suggest a solution?

Answer 1

You should use a callback pass to the function and let it deal your data.

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

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