javascript-执行功能的顺序

Question

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...

Answer 1

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.

Answer 2

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();
            });
        });
    });
});

Answer 3

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.