How to return function value after ajax call result?

Question

Example:

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

But then when the script is asynchronous, it will return "". This is clearly not what I want.

So, I tried this:

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

And I expected this to work, but it is not. Why not? And can anyone suggest a solution?

Answer 1

You must use the callback for the function and let it process your data.

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

Answer 2

The first "a" ajax means asynchrony, and so what you are trying to do is similar to the ajax philosophy. However, you can use a lock request, but this is not supported by the simplified .get interface, and you should use the .ajax function:

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

The main javascript execution model is event-based and single-threaded (there are web workers who provide multi-threading capabilities, but each employee lives in their own address space and cannot share any memory with other employees or the main thread. Therefore, in a sense, they more like processes than threads).

In Javascript, you cannot “wait” in a loop for other events, you should always stop working quickly, perhaps by attaching callbacks that will be called again when something happens. If you make a loop, the javascript engine will just get stuck in that loop and will not be able to do other processing (if it is visible from javascript). For instance:

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

Will NOT work because the browser engine is not allowed to execute other javascript code (timeout callback) until the main code path completes.

This event-based approach simplifies programming (because there is no need for blocking ... there is always only one state-controlling thread), but it forces you to use a different thread project for lengthy operations.

The fact that there is one thread of execution also means that although your javascript code does any lengthy calculations, everything else is blocked and the browser looks immune to the user.

This irresponsibility is why using synchronous calls to retrieve resources is considered bad practice ... the difficult task of acquiring different resources from multiple threads at the same time is already implemented by the browser, but your javascript code is needed to use the callback to be able to use this feature.

Answer 3

When using ajax, you should write your code a little differently. You must separate your caller and caller logic.

Assume your existing code is similar to

 function getfoo() { var foo = ""; $.get("foofile.html", function (data) { foo = data; }); return foo; } function usefoo(){ var data = getfoo(); // do something with data } 

It really should be written as

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