Javascript wait for function to finish

Question

I know this question has been asked tens if not hundreds of times, but I turned google purple and still can't find an answer that suits my case.

I have a set of three functions that I need to call one from within the other, and need each function to finish before the one that calls it continues. Currently what happens is that a function would call another one, and then continue before the function it called finished.

Most of what I have seen says to use callback functions, my problem is that my inner most function is taken from a library, thus I can not adapt it to accept a callback function as a parameter. I also saw things on timeouts, but I do not want to force my code to wait any longer than it has to, I just want it to continue once the function it calls finished.

I just want everything to work synchronously, like I am used to from any other language.

To illustrate my current code, I am using three.js and this is (basically) what I have:

firstfunction(){
    secondFunction();
}

secondFunction(){
    var loader = new THREE.JSONLoader(); //loader is an object from three.js library

    //loader.load is a three.js function that calls thirdFunction that I made. I can not make loader.load send a callback function to thirdFunction, as thirdFunction takes its arguments from three.js library
    loader.load(url, thirdFunction); 
}

thirdFunction(){ //this is a function that gets called from loader.load
    //do stuff
}

I feel like I am missing something very trivial, but as I said I can't find anything online that fits my needs.

Any help would be greatly appreciated

Answer 1

Even if some libraries and apis allow you to do things synchronously, this is not how javascript should work. Even if you're used to this in other languages, javascript is different.

The answer to your question probably is 'this is not possible'.

Try to lean javascript the correct way, instead of making it behave like other languages.

However, there's some hope. Once you understand fully how callback works, and structure your code around that, you might realize that Promises is a better pattern that callbacks. Promises still need a sort of call-back and are still asynchronous, but it's easier to make your code easier to read.

Then once you fully understand promises, you might be able to use async and await. New browsers support this. These 2 keywords make a lot of your code 'look' synchronous like you're used to, but it's still asynchronous. It's pretty great.

Edit

I wanna address the follow sentence more directly:

//loader.load is a three.js function that calls thirdFunction that I made. I can not make loader.load send a callback function to thirdFunction, as thirdFunction takes its arguments from three.js library

Do you really need to send that third function another callback? What kind of callback is this? Is it just another function it should always call?

You can just call another function normally from your ThirdFunction. If you need it to be variable, you can probably just assign that function to a variable. Functions can access variables from their parent scope. For example:

var callback = '..'; // assuming this a callback.

thirdFunction(){
    callback();
}

If only your second function knows what the callback should be, you might need to structure it like this:

secondFunction(){
    var loader = new THREE.JSONLoader(); //loader is an object from three.js library

    var callback = '...';

    loader.load(url, function() {
        thirdFunction(callback);
    }); 
}