0

I have some javascript functions being called on Document Ready:

fogFields();
getLoS();
getShips();    

startGame();
getNextMove();

However, it is as though getNextMove() is being called first, most likely as all it does is an ajax call and alerts the result. All the other functions have more work, so, the first thing that happens on load is the getNextMove() alert, and in the background you can see that none of the other functions did their work. Until I click OK on the alert window, no results are shown. Can I make it so that until a function finishes, the next wont even start. Some functions call their own extra functions before they finish, and that works in order, but I cant do that with the whole code...

Improve this question
4
  • Are other functions also making ajax callbacks? If yes, then the order cannot be guaranteed. Commented Aug 1, 2013 at 20:46
  • If a function has AJAX, it runs in the background and continues on with the rest of the function. alerts will pause execution (but not AJAX) until they are closed. Commented Aug 1, 2013 at 20:47
  • @abhitalks: You could use a function queue. Commented Aug 1, 2013 at 20:47
  • @RocketHazmat Yep. That's certainly a possibility. Commented Aug 1, 2013 at 20:50

3 Answers 3

Reset to default
3

Given the code in your question, there is no way the call to getNextMove can be invoked before startGame has been exited, regardless of their contents.

It may be true that a function that has been scheduled asynchronously (via timeout, AJAX callback etc.) within startGame completes at any time before or after the invocation of getNextMove, but this is a separate issue. To resolve that issue we need to know more about the contents of the functions.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Yes other functions have AJAX calls, there are no timeouts.
@user1479059 The callbacks (these are function in and of themselves) to the AJAX calls are being invoked after the top level function that dispatched the AJAX call is over. The solution depends on a couple of things. Do the callbacks to the earlier functions need to be invoked in a certain order relative to each other, or just whenever, as long as it is before getNextMove?
The order of the AJAX calls (they are actually JQ AJAX) does not matter - I just want them to be executed before the getNextMove() function. I have also tried putting the first 3 functions in a new one called draw() - and getNextMove in gNM(), and instead of alerting I display the result of getNextMove to a div.
The gNM() is called after draw(), but still, gNM() changes the div, and then draw() changes it. Same thing happening...
Also, startgame() is empty for now, so it does not matter.
|
0

If the other functions have an AJAX call in them, then these AJAX calls most certainly take a callback argument, which is a function that gets executes, when the AJAX call has finshed. Now, if you want to execute your functions in a way, the one function starts when the AJAX call of the previous function finished, you can add an additional callback argument to your own functions, which will then be passed to the AJAX calls. This should illustrate what I mean:

function logFields(callback) {
    ajaxCall(callback);
}

function getLoS(callback) {
    ajaxCall(callback);
}

function getShips(callback) {
    ajaxCall(callback);
}

function startGame(callback) {
    ajaxCall(callback);
}

function getNextMove() {
}

fogFields(function(){
    getLoS(function(){
        getShips(function(){
            startGame(function(){
                getNextMove();
            });
        });
    });
});
Improve this answer

6 Comments

The problem with this is that it makes your AJAX calls sequential instead of concurrent, and really slows you down. It should be possible to dispatch all the AJAX requests at once, and invoke the next callback in the sequence as soon as it becomes available.
That's true. But I'm not sure if I understand your suggestion. What would be "the next callback" if you dispatch all the AJAX requests at once? Also, I'm not sure what the AJAX calls contain. Maybe they contain data from the results of previous calls. But sure, it probably would be better to have only one AJAX call, that simply does everything.
var callbackSeq = ["logFields", "getLoS", "getShips", "startGame"]; var loadedCallbacks = {}; function runLoadedCallbacks(name, newestCallback) {...}; The callback to each AJAX request contains a function that closes over the returned data and an identifier string. It passes this function to runLoadedCallbacks. runLoadedCallbacks adds the function to the loadedCallbacks object under the key corresponding to key, then starting at the beginning of callbackSeq runs and removes as many functions as it can, breaking when it finds a name that isn't in loadedCallbacks.
As far as I understand, what you are suggesting is kind of a queue, that assures, that the callbacks run in the right order. Which is nice but it doesn't solve the problem of dependencies. What if you need the result of one AJAX call, to start the next one? The question doesn't really give enough information about what is really happening. He asked "Can I make it so that until a function finishes, the next wont even start" and that is basically what I responded to, since I don't know what happens inside of his functions.
That's true. I didn't consider whether the result from a callback would be needed at the time when you're dispatching the AJAX request. However, based on this comment: "The order of the AJAX calls (they are actually JQ AJAX) does not matter", I think the OP is only concerned about the order in which the callbacks are executed (perhaps not even that, in which case we could use a simple count variable that we can monitor on loop before invoking gNM()).
|
0

If all of your functions use a ajax call then just use promises. Simply return it, for example: 

function fogFields(){
    return $.ajax();
};

and then just use .then:

fogFields().then(getLos());

more information about deffered object on jquery doc page if you use it. Or implementation in pure javascript you can find here and more theory here.
or another option, which I will not recommend you is to set async param in $.ajax call to false. Again it's for case you use jQuery.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.