Dynamically load jQuery and use it in another function

Question

function getArray() {
    var j = document.createElement('script');
    j.src = "http://code.jquery.com/jquery-2.1.4.min.js";
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(j);
    var my_array = [];
    j.addEventListener('load',function(){
        // Some jQuery codes to fill my_array
    });
    return my_array;
}

I use above code to dynamically load jQuery in console, and then use jQuery to get some data from the DOM and store them in the array. However, it returns an empty array. I think it is because loading jQuery takes some time and the function gets returned before the jQuery is loaded and the jQuery codes are executed.

So before getArray() returns, I must make sure the jQuery codes have been executed. I've tried to put return my_array inside the addEventListener, of course it won't work because that way it will return the anonymous function. I can think of some ways to deal with this issue, like making the my_array a global so I don't have to return the function, or putting the jQuery loading codes to another loadjQuery function and call it before I execute the jQuery codes, but is there a better way to do it?

The addEventListener callback is run in response to an event and is therefore asynchronous. So wont getArray always return an empty array before the callback is invoked. — tomasbasham
– tomasbasham, Commented Aug 5, 2015 at 20:58

Ranjit Singh · Accepted Answer · 2015-08-05 21:04:15Z

1

The problem is due to asynchronous call of loading jquery script.

The best way to do it will be, write a function to load a script and pass the callback function, then on successful load of script call your callback function, eg:

function loadScript(callback) {
    var j = document.createElement('script');
    j.src = "http://code.jquery.com/jquery-2.1.4.min.js";
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(j);

    j.addEventListener('load',function(){
        if(typeof(callback) == "function")
    });
}
function getArray(){
var my_array = [];
// Some jQuery codes to fill my_array
return my_array;
}

loadScript(getArray)

answered Aug 5, 2015 at 21:04

Ranjit Singh

3,7351 gold badge23 silver badges36 bronze badges

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

1 Comment

Amit Over a year ago

How does that solve anything? will calling loadScript(getArray) return the filled array? (Hint: No, it won't)

Amit · Accepted Answer · 2015-08-05 21:10:00Z

Unfortunately, that can't be done. JavaScript is an event based single-thread asynchronous language. What you're trying to do can't work in that type of environment.

However, it's likely you simply need to load jQuery before processing this function (even using a simple <script> tag) to solve your issue. Otherwise, you're likely to encounter a very noticeable delay when calling the function due to the downloading & evaluating of the jQuery library. Another issue would be that if you call the function more then 1 time, you'll load jQuery again, and that might create a big big mess.

Alternatively, if you "insist" on using jQuery & have it only loaded once your function is called, you could return a Promise that will resolve to your array like this (This will require a supporting browser or some polyfills / promise library):

function getArray() {
  var j = document.createElement('script');
  j.src = "http://code.jquery.com/jquery-2.1.4.min.js";
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(j);
  return new Promise(function(resolve, reject) {
    j.addEventListener('load',function(){
      var my_array = [];
      // Some jQuery codes to fill my_array
      resolve(my_array);
    });
  });
}

Collectives™ on Stack Overflow

Dynamically load jQuery and use it in another function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related