Make sure JS file is loaded and JS function is called BEFORE calling another function

Question

I have an issue with a tracking code that doesn't work properly since its called before a required JS script and function is loaded. Here is the situation:

Upon successful form submission (CF7 on WordPress) the following function is called right away.

    function fn111Rooms(){
       var email_address = document.getElementsByName("your-email")[0].value;
       fnTransaction('Room booked', 'userid=' + email_address);
       location.replace('http://example.com/thank-you');
     }

The problem is, however, that the following script + function needs to be called beforehand to make everything work

<script type="text/javascript" src="http://www.example.com/Tracking.js"></script>
<script>fnPageHit('4ddc12d4344');</script>

This bit is placed in the section of each page but is not called again upon form submission since the form submits via AJAX (I believe that's the issue).

How can I include the script into the fn111Rooms and make sure everything is called correctly and in order. Really sorry in case that's a stupid question but JS is still confusing me from time to time.

EDIT: Would this work?

function fn111Rooms(){

    // Loads the script
    var fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript")
    fileref.setAttribute("src", "http://www.example.com/Tracking.js")

    // Calls the required function
    fnPageHit('4ddc12d4344');

    // Does the rest
    var email_address = document.getElementsByName("your-email")[0].value;
    fnTransaction('Room booked',    'userid=' + email_address);
    location.replace('http://example.com/thank-you');
 }

And then just call the one function when submitting the form.. ?

Answer 1

You could take a look at jQuery.when()

Lets say you have a function you have to execute

function yourFirstFunction(){ 
    $.post('/somewhere'); 
} 

And a second right after first one finishes

function yourOtherFunction() {
    //stuff
}

Then you can use the following construction

$.when( yourFirstFunction() ).then(function(data) { 
    yourOtherFunction()
})

ie when yourFirstFunction is done (ajax request finished) yourSecondFunction will be executed

Answer 2

One way to do is applying infinite loop with some interval and checking following condition

fnPageHit && fnPageHit('4ddc12d4344');

so whenevr the ile gets loaded u will get function in other cases fnPageHit will be undefined hence it will not execute and will no cause error