Not defined function from $.getScript

Question

This one must be very simple. An external javascript file contains:

function Hello() {
    alert('Hello');
}

It is getScript()ed and then a contained function is called

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $.getScript('myscript.js');
    Hello();
</script>

I get:

ReferenceError: Hello is not defined

But if the script is referenced in an HTML <script> tag it works as expected

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="myscript.js" type="text/javascript"></script>
<script type="text/javascript">
    Hello();
</script>

What I am missing? How to reference objects created in a getScript()ed script? The reason I want to use getScript() it to load the script on a ready() event.

Answer 1

The issue is that the $.getScript() function is asynchronous. When you call the Hello() function immediately after, the script is not yet loaded so the function is not available.

Loading scripts with regular <script> tags happens synchronously, so if you want to duplicate that behavior you have to disable the async option in your Ajax call.

getScript alone does not support this, so you can do this using an $.ajax call with the appropriate options:

 $.ajax({
     url: 'myscript.js',
     dataType: 'script',
     async: false
});

This will block the browser until the script is loaded.

However, a better technique is to use a callback, which $.getScript() does support:

$.getScript('myscript.js', function() {
    Hello();
});