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
    });
});

jvdmr · Accepted Answer · 2019-02-05 12:44:36Z

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");
});

nicholaswmin · Accepted Answer · 2019-02-05 12:42:06Z

0

$.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)

edited Feb 5, 2019 at 12:42

answered Feb 5, 2019 at 12:25

nicholaswmin

23.2k16 gold badges103 silver badges175 bronze badges

1 Comment

Álvaro Touzón Over a year ago

havent tested but looks well

Collectives™ on Stack Overflow

Load scripts asynchronously using getScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related