Question

The problem:

I have the following script where basically, I am getting data from an ajax call, passing the data to a function, storing the id from the data in a global variable, so the global variable can be used in a different script retrieved from jQuery’s $.getScript():

The script (script1.js):

This bit just gets a bit of data via ajax (not shown), but it’s in widget_data.d and it should run the getWidgetContent() function based on the length of the data in widget_data.d, in this case 3 iterations:

window.global_widget_id = "";

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

    getWidgetContent( widget_data.d[j] );

}

This is the function the loop above runs:

function getWidgetContent( widget ) {

    if(widget.script!=null){

        window.global_widget_id = widget.widget_id;

        $.getScript( "js/script2.js", function() {

            alert( "direct title variable in script1.js: " + widget.title );
            alert( "global variable in script1.js: " + window.global_widget_id );
            alert( "direct variable in script1.js: " + widget.widget_id );

            $( ".widget_header_title_" + widget.widget_id ).append( widget.title );

        });


    }

}

The script (script2.js):

This is the script which the above function passes the global variable too, which should then get data via ajax based on the globally stored id.

var my_widget_id = window.global_widget_id;

alert( "global variable in script2.js " + window.global_widget_id );
alert( "direct variable in script2.js: " + my_widget_id );

// then do some more ajax stuff with global_widget_id before repeating the loop again.

Actual results:

global variable in script2.js: 66
direct variable in script2.js: 66
direct title variable in script1.js: title for 57 goes here
global variable in script1.js 66
direct variable in script1.js 57

global variable in script2.js: 66
direct variable in script2.js: 66
direct title variable in script1.js: title for 65 goes here
global variable in script1.js 66
direct variable in script1.js 65

global variable in script2.js: 66
direct variable in script2.js: 66
direct title variable in script1.js: title for 66 goes here
global variable in script1.js 66
direct variable in script1.js: 66

Expected results:

global variable in script2.js: 57
direct variable in script2.js: 57
direct title variable in script1.js: title for 57 goes here
global variable in script1.js 57
direct variable in script1.js 57

global variable in script2.js: 65
direct variable in script2.js: 65
direct title variable in script1.js: title for 65 goes here
global variable in script1.js 65
direct variable in script1.js 65

global variable in script2.js: 66
direct variable in script2.js: 66
direct title variable in script1.js: title for 66 goes here
global variable in script1.js 66
direct variable in script1.js: 66

---

What I have tried:

Based on this website, I could create a generator function. Here is a template:

(function(variable) {
  return function() {
    // do something with variable 
  }
})(value);

I’ve tried using this, but nothing happens, no errors, no alerts, nothing, i.e:

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

    var the_data = widget_data.d[j];

    (function(the_data ) {
      return function() {
        getWidgetContent( the_data  );
      }
    })(the_data);

}

---

The question:

Why is the generator function not working?

Answer 1

What you are doing, is returning a function that calls your getWidgetContent.

(function(the_data ) {
  return function() { // you will return a function, it will not get called.
    getWidgetContent( the_data  );
  }
})(the_data); // the (the_data) means you call the first function with the_data as parameter.

If you want to call getWidgetContent, you need to call it directly.

(function(the_data ) {
  return getWidgetContent( the_data  );
})(the_data); 
// this will call your anonymous function with the_data as parameter, giving closure.

but from what i can see, this is not your only concern. Your success function that prints the script1.js output is called after script2.js has been run, and probably after loops of loading.

Edit:
By the time script2.js is loaded, you have set the global variable 3 times with 57, 65, 66, but since you overwrite it, script2.js only sees the last value, 66. Your loop is much faster than the script download, which is asynchronous.

I think that what you should do is put your script2 code in a function, and call it from the script1 success callback with the widget as a parameter.

function getWidgetContent( widget ) {

  if(widget.script!=null){

    window.global_widget_id = widget.widget_id;

    $.getScript( "js/script2.js", function(inner_widget) {
        return function() {
          // this is the function that will get called as the callback.
          alert( "direct title variable in script1.js: " + inner_widget.title );
          alert( "global variable in script1.js: " + window.global_widget_id );
          alert( "direct variable in script1.js: " + inner_widget.widget_id );
          // inner_widget is the parameter, so it is in a closure
          $( ".widget_header_title_" + inner_widget.widget_id ).append( inner_widget.title );
          //make your call to script2.js if you want.
          script2.run(inner_widget);
        }
    }(widget));
    //we call the generator function with the widget to get closure.
  }
}