Javascript wait for function response

Question

I have the following code:

myFunc();
bar();

myFunc() is making an ajax request

I don't want to execute bar() until myFunc()'s request has completed.

I also do not want to move the call to bar() inside of myFunc.

possible?

EDIT

Here is the code I ended up with:

var FOO = {
 init: function(blah)
 {
  // Callbacks to pass to the AJAX challenge data load
  var callbacks = {
   myFunc1: function(){ myFunc1(blah); },
   myFunc2: function(){ myFunc2(blah); },
  };

  this.bar(callbacks); // Load the challenge data and setup the game
 },
 bar: function(callbacks) { ..loop through and execute them.. }

};

Answer 1

No, not possible unless you use a synchronous request which is no longer AJAX and something I wouldn't recommend you doing as it will freeze the UI until the request completes and users hate having their browser freezing.

Answer 2

No, it is not possible.

You could achieve it with the side effect that you lock up the browser by making a SJAX request instead of an AJAX request, but that is a terrible idea.

Learn to love event driven programming when you work in an event driven programming environment.

Answer 3

IF you can add a kind of a flag that will indicate that myFunc() has finished with its request you can do it, but this is not a good idea - best practice is to use callbacks.

Try this code:

var successRequest = false;
myFunc(); // when get the response set successRequest to true

var interval = setInterval(function() {
    if (successRequest) {
        clearInterval(interval);
        bar();
    }
}, 100);

Answer 4

Hello,

In order to do what you are looking for, you must find a way for bar() to communicate with myFunc().

When you say that you do not want to move the call to bar() inside myFunc() this can be interpreted in several ways.

For example, you could make bar() a parameter of myFunc()

function bar() {
   // do what bar() does
}

function myFunc(callback) {
   // use callback in the onreadystatechange property of the xmlhtprequest object
}

myFunc(bar)

I hope this will help you

Jerome Wagner

Answer 5

Somewhere in you code you have an AJAX call similar to

xmlHttp.open("GET/POST",url,true);

Change the third parameter to false

xmlHttp.open("GET/POST",url,false);

It will make a synchronous request, as explained here http://www.w3.org/TR/XMLHttpRequest/#the-open-method

The effect is that your script freezes after calling myFunc() and wait for the server. After the response, it executes bar(). Think twice before using this attitude: if server does not response (i.e. connection lost), your javascript will not wake up! This is better attitude:

Somewhere in you ajax code, you have something like this

xmlHttp.onreadystatechange = handler;

Find the definition of handler and call bar() inside it

function handler() {
  // some code
  if(htmlHttp.readyState==4) { // or something like this
    // some other code
    bar();
  }
}

Huge and useless AJAX frameworks can make it a bit more complicated. You can write your own under 2kB code (uncompressed, reliable, with caching, delaying), here is some basic howto http://www.w3schools.com/ajax/default.asp