How to know if Javascript append method has completed with script tag

Question

var js_1 = "<script type="text/javascript" src="https://xxxx.yyy.appl.js"> </script>" 

var js_2 = <script type="text/javascript">JUMBO.submission.onComplete(function(response) { alert('hello'); console.log(response); }); </script>

    $('.form-section').append(js_1);  ---> line 3 
    $('.form-section').append(js_2);  ---> line 4

In normal scenario JUMBO object should be defined after appl.js is initiated, but in my scenario i get error saying JUMBO is not defined.

My findings:
If it was regular append method, as it is synchronous calls, it wouldn't be a problem but as the js_1 is async call, before this line 3 is getting executed, line 4 is getting executed and getting error.

I have tried $.getScript, Deferred methods to solve it but no luck. Any help would be rewarded.

NOTE:

<script type="text/javascript" src="https://xxxx.yyy.appl.js"> </script>" have to be inserted into the DOM such that it will generate the required html.

Answer 1

Use the callback argument to $.getScript

$.getScript("https://xxxx.yyy.appl.js", function() {
    JUMBO.submission.onComplete(function(response) { 
        alert('hello'); 
        console.log(response); 
    });
});

The callback will be executed after the script has been loaded.