getScript, loading multiple scripts in series?

Question

I am trying to load multiple .js files through the GetScript method. I need them to be loaded in series, meaning the first .js files needs to be fully loaded before going to the next one.

Question 1: I was using the code below, but found that this becomes quite messy when the amount of js files increase. Is there a more clear way of loading multiple .js files?

Also, I've found that function( data, textStatus, jqxhr ) is a callback function that is executed when the getScript request succeeds. The parameters (data, textStatus, jqxhr) can be used in the funtion, where: data is the data from the .js file, textStatus is the status of the request and jqxhr is a XMLHttpRequest object.

Question 2: Why is the parameter textStatus used as a callback? Using it in this function will always set it to Success, right?

Question 3: When I only want to execute the next getScript, i could just leave out the parameters and write: jQuery.getScript("url.min.js", function() { Correct?

jQuery.getScript("//url1.com/file1.js", function(data, textStatus, jqxhr) {
  jQuery.getScript("//url2.com/file2.js", function(data, textStatus, jqxhr) {
    jQuery.getScript("//url3.com/file3.js", function(data, textStatus, jqxhr) {
      jQuery.getScript("//url4.com/file4.js", function(data, textStatus, jqxhr) {
      });
    });
  });
});

Thank you.

Rory McCrossan · Accepted Answer · 2019-03-01 11:18:40Z

3

I was using the code below, but found that this becomes quite messy when the amount of js files increase. Is there a more clear way of loading multiple .js files?

You could DRY it up a little by recursively iterating through an array of URLs, assuming that no further processing is required in the callback. Something like this:

function getScript(arr, i) {
  i = i || 0;
  jQuery.getScript(arr[i], function() {
    i++;
    arr.length > i && getScript(arr, i);
  });
}
getScript(['//url1.com/file1.js', '//url2.com/file2.js', '//url3.com/file3.js', '//url4.com/file4.js']);

Why is the parameter textStatus used as a callback? Using it in this function will always set it to Success, right?

It follows the same pattern as other jQuery AJAX methods, you're right that in this case it will always be a successful response.

When I only want to execute the next getScript, i could just leave out the parameters and write: jQuery.getScript("url.min.js", function() { Correct?

Yes

edited Mar 1, 2019 at 11:18

answered Feb 28, 2019 at 15:53

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

RobbTe Over a year ago

Hi, thanks. I do get a js (console) error: Error in script declaration; Error:scriptUrls is not defined

Rory McCrossan Over a year ago

Apologies, that should be arr[i]. I've updated the answer for you

RobbTe Over a year ago

Works, thanks. To be sure; this loads the next .js file, after the previous one is loaded succesfully correct?

Rory McCrossan Over a year ago

That's right. The logic flow is the same as your original, just less repetetive :)

Collectives™ on Stack Overflow

getScript, loading multiple scripts in series?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related