What is the best way to wait for jquery ajax getJSON to complete if many functions rely on the response?

Question

tl;dr

What is the best way to wait for a $.getJSON to complete before executing the rest of the code if it's not just one function but many that rely on the the response?

Longer explanation:

I have a javascript application that has reached a certain level of complexity. Closing in on a thousand lines of code and two dozen function and no end in sight. The application relies on values stored in a database. More precisely, I don't have a single function that is relying on the requested data but most of my functions use those values and some point.

So far, I pulled the data from the db in php and just echoed them into input fields and then read those in js. But with an increasing number of variables transferred this way, this is getting unwieldy and does not seem very elegant. I do have most data available in objects and stuffing their member variables in input fields seems ... clunky.

I pondered different ways of data transfer and settled on jquery ajax for several reasons, not the least being a clean separation of layers and me using jquery ajax already for other things.

The problem: I ran into race condition problems. Some of my code - that relies on the data requested by getJSON - is executed before the request is finished. And that breaks the whole application. I already researched a bit and know now that there are several ways to solve this, however I'm not experienced to judge which approach I should chose.

1. Use async: false, this still works and is likely the easiest thing to implement, but it is marked as deprecated and as such I'm hesitant to use it.
2. Putting everything in the success handler like

    $.getJSON("../sender.php", params, function (result) {
        //my whole application
    });

3. Use promises. If I understand correctly, this means that I have to wrap $.when( req1, req2, req3 ).done( ... ) around every function I use a requested value in. This doesn't seem good for readabilty and I've learned that clean, readable code is usually the better code than complex constructions.
4. Use synchonous request like

    var request = new XMLHttpRequest();
        request.open('GET', '../sender.php', false);
        request.send(params);

    if (request.status === 200) {
        //fill the variables with the returned values
    }

5. Something else altogether? These are just the most common solutions I found, there are probably other possibilities how to do this. I'm thankful for every suggestion!

Answer 1

As ajax is asynchronous request ajax method will not wait for other method to execute Best practice to call dependant methods will be in success of ajax call It will execute/ call function only after ajax response recieved. You can make request by various ways

1. use traditional method or off asynchronous request of ajax
2. make ajax queue and serve one request by another on recieving the response- you can store there status and run them every second by using timeinterval function which will be hectic.

I will suggest you to go with 1 as asynchronous request can be served as synchronous by async: "false"