1

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?

2 Answers 2

0

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.
  }
}
1
  • What I have not mentioned is that I will have hundreds of small scripts, which I will want to call using $.getScript only when needed based on user selection. If I call all the scripts right from the start, that will just slow things down and increase download time. Dec 10, 2012 at 14:30
0

Isnt ist just:

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

  var the_data = widget_data.d[j];

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

}

?

Else i cant see where the returned function gets called

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.