CODEWITHSUNDEEP
javascriptdynamic
shenkwen
shenkwen

Reputation: 3880

Dynamically load jQuery and use it in another function

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?

Upvotes: 0

Views: 356

Answers (2)

Amit
Amit

Reputation: 46361

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

Upvotes: 1

Ranjit Singh
Ranjit Singh

Reputation: 3735

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)

Upvotes: 1

Related Questions