Load scripts asynchronously using getScript

Question

I want use function from path /js/testscript.js, /js/testscript.js is dependent from /script5.js, but testscript.js load after call $(this).testscript();
What am I doing wrong? Scripts are dependent.

$.when
(
    $.getScript('/script.js').done(function() {
          $.getScript('/script2.js'),
          $.getScript('script3.js').done(function() {
          $.getScript('/script4.js').done(function() {
            $.getScript('/script5.js').done(function() {
                $.getScript( "/js/testscript.js" ).done(function() {
                  console.log("LOADED 2");  
                })
            })
          })
        })
    }),
    $.Deferred(function(deferred) {
        $( deferred.resolve );
    })
).done(function() {
    console.log("TEST");
    $( ".test" ).each(function() {
            console.log("LOADED 1");
            $(this).testscript(); //function from /js/testscript.js
    });
});

Answer 1

The second Deferred object becomes resolved as soon as the DOM finishes loading, it does not wait for the getScript() methods (since those could theoretically be executed way later, so they don't get special treatment).

The first Deferred object becomes resolved when /script.js finishes loading, not when all the scripts have finished loading. At that point, the doneCallback to load /scripts2.js is called, but the doneCallback for the $.when(...) is also already called since both Deferred objects it was passed are resolved at that point.

You should put the $(this).testscript(); callback as the doneCallback for the getScript("/js/testscript.js"), not for the when(...) statement, like this:

$.when(
  $.getScript('/script.js').done(function() {
    $.getScript('/script2.js'),
    $.getScript('script3.js').done(function() {
      $.getScript('/script4.js').done(function() {
        $.getScript('/script5.js').done(function() {
          $.getScript( "/js/testscript.js" ).done(function() {
            console.log("LOADED 2");
            $( ".test" ).each(function() {
              console.log("LOADED 1");
              $(this).testscript(); //function from /js/testscript.js
            });
          })
        })
      })
    })
  }),
  $.Deferred(function(deferred) {
    $( deferred.resolve );
  })
).done(function() {
  console.log("TEST");
});

Answer 2

$.getScript seems to return a Promise so you can load non-dependent scripts in-parallel using Promise.all then use promise chaining to load dependent scripts.

In the following example, bar.js is dependent on foo.js while the rest don't have any dependencies between them:

Promise.all([
  $.getScript('/script1.js'),
  $.getScript('/script2.js')
])
.then(() => $.getScript('/foo.js'))
.then(() => $.getScript('/bar.js'))
.then(() => {
  console.log('All scripts loaded')
})
.catch(console.error)