Having difficulty working with global variables and $.getScript

Question

I have the following script which does not work properly:

function getWidgetContent( widget ) {
    if(widget.script!=null){
        $global_widget_id = widget.widget_id;
        $.getScript( "js/" + widget.script, function() {
            $( ".widget_header_title_" + widget.widget_id ).append( widget.title );
        });
    }
}

This is called as follows:

for ( j = 0; j <= widget_data.d.length - 1; j++ ) {
    getWidgetContent( widget_data.d[j] );
}

I thought this would run the function, within the function, assign a value to the global value, then run the $.getScript per iteration of the loop. But that is not happening. It seems to iterate through the loop until the loop is finished, lets say it loops 3 times, assign a value to the global value each time, i.e. 3 times, and then it finally goes and does the $.getScript.

Ofcourse that will not working as it will now only use the last assignment of the global value in the $.getScript file 3 times...

How do I change this so it assigns a value to the global variable, runs the $.getScript. When done, continue with the original loop, assign the next value to the global variable, run the $.getScript until the loop has finished.

Answer 1

You're getting this because $.getScript is an asynchronous method. In this case, it means that the method returns immediately before the script has finished loading, and continues executing code after it.

What this means is that something like:

$.getScript('a.js', function () {
    console.log('Loaded a');
    }); 
$.getScript('b.js', function () {
    console.log('Loaded b');
    }); 
$.getScript('c.js', function () {
    console.log('Loaded c');
    }); 
// Output could be:
// Loaded c
// Loaded a
// Loaded b

This means that all of the script files requests can be done simultaneously but it also means that the order is not deterministic (fixed).

Use Promises

You can ensure that the getWidgetContent is called sequentially by chaining promises if you are using jQuery 1.5 and above. However, the pitfall of this method is that you will not be concurrently loading all the script requests at the same time, the requests will be sent one after another after the previous one has completed.

Make sure you return the result of $.getScript which is a Deferred Object (I made minimal changes here, just note the return statements):

function getWidgetContent( widget ) {
  if(widget.script!=null){
    $global_widget_id = widget.widget_id;
    return $.getScript( "js/" + widget.script, function() {
        $( ".widget_header_title_" + widget.widget_id ).append( widget.title );
        });
  }
  return null;
}

New method to perform a new getWidgetContent after a previous promise is fulfilled (completion of previous action):

function doGetWidgetContentAfter(promise, widget) {
  return promise.then(function () {
      return getWidgetContent( widget );
      });
}

Calling it:

var promise = $.when(true);
for ( j = 0; j <= widget_data.d.length - 1; j++ ) {
  promise = doGetWidgetContentAfter( promise, widget_data.d[j] );
}

Explanation

What doGetWidgetContentAfter does is that when the said promise is complete then call the getWidgetContent function for widget. The then method returns a promise that completes when any internal methods promise completes.

I know it's starting to sound complicated, but do play around and experiment with it. :)

Answer 2

Looking the others answers I can only think in do. Change the your implementation:

 $.getScript( "js/" + widget.script, function() {
     $( ".widget_header_title_" + widget.widget_id ).append( widget.title );
 });

To a corresponding ajax call, but not asynchronous

$.ajax({
  url: "js/" + widget.script,
  dataType: "script",
  async: false,
  success: function() {    
      $( ".widget_header_title_" + widget.widget_id ).append( widget.title );    
  }
});

Answer 3

getWidgetContent is doing the getScript, but getScript returns immediately instead of waiting for the network (which is relatively slow compared to the CPU) to finish getting your script. This is not a bug, but an awesome thing - with asynchronous programming, you can get lots of work done on the CPU, and you don't have to wait for things that are much slower than the CPU if you don't want to!

To answer your question:

• To set the global variable when the script request is done, simply move the variable assignment into your callback function.
• Simply allowing all getScripts to run at once would be faster, but if you really can't allow a second getScript to start until the first finishes, call getWidgetContent just once, and have your callback determine the next widget in line and call getWidgetContent again with it.

Answer 4

the getScript method is async, so before you get a response from the server containing youre script value the loop runs the next iteration
thats why we have to send in a callback function. javascript knows what to do once the server responds. so while a normal loop cant help us here we can use a recusive function. what happens is thatwe get the callback function to call the loopFunc that then moves on to the next item in the collection/array. i hoppe this can give you som inspriation:

var getWidgetContent = function(wiget, loopFunc) {
  if(widget.script!=null){
    $global_widget_id = widget.widget_id
    $.getScript( "js/" + widget.script, function() {
        $( ".widget_header_title_" + widget.widget_id ).append( widget.title )
        loopFunc() //now we got a response from the server and want to move on to the next script tag.
    })
  }
}

var i = 0
(function loopFunc(){ //we define a function and call it instantly
  if(i < widget_data.d.length){ 
    getWidgetContent(widget_data.d,loopFunc) //now we call the getWidgetContent but we send in the current function aswell
    console.log($global_widget_id) // this is going to change each time
    i += 1
  }
}())

Answer 5

Try assigning the variable to the window namespace:

window.global_widget_id = "foo";

You can then reference it like this:

var myId = window.global_widget_id;

and overwrite it:

window.global_widget_id = "newId";

(The $ in your variable assignment might be confusing jQuery too.) (Incorrect. Ignore that last part.)

EDIT:

It appears $.getScript() files aren't part of the global scope: jQuery's getScript - including files into the main scope?.

Maybe you could call the $.getScript() functions from a callback rather than an embedded document.ready(), and pass the variable through that way?

Answer 6

May be it can help you, Placing function inside loops can rewrite variable that contained in it

In my opinion, do it like this:

function getWidgetContent(widget) {
  if(w_script != null){
    // And make variable for make sure each values come
    // from parent function and not from `$.getScript`
    var w_script = widget.script;
    var w_widget_id = widget.widget_id;
    var w_title = widget.title;
    $.getScript( "js/" + w_script, function() {
        $( ".widget_header_title_" + w_widget_id ).append( w_title );
    });
  }
}

This case have face me, but i face it on $.ajax, and i try to make variable like above Call me if success, good luck

Answer 7

If you wan't the code to be executed in order then you will have to rewrite it a bit. The next call to getScript should not be done until the previous one has called its callback. This can be done by calling getWidgetContent from the callback...

Something like:

function getWidgetContent(d, index) {
  var widget = d[index];
  if(widget.script!=null){
    $global_widget_id = widget.widget_id;
    $.getScript( "js/" + widget.script, function() {
        $( ".widget_header_title_" + widget.widget_id ).append( widget.title );
        if (index <= d.length - 1)
            getWidgetContent(d,index+1); //call the next one
    });
  }
}

//Start the calls
getWidgetContent( widget_data.d,0);