Web (PHP, Javascript)

Javascript arguments by value

Let us consider the following situation: one has several widgets, which have to be loaded onto the page dynamically, but each can take a while to load. A solution is to do the loading asynchronously for each component with a nice progress bar displayed to the user.

For example, SIMILE Timeline uses the asynchronous approach to load the data for historical timelines.

After the timelines have been configured, one has to load the data into them using loadXML function.

var eventSource = new Timeline.DefaultEventSource( 0 );
var timeline = Timeline.create(td, bands, Timeline.HORIZONTAL);
timeline.loadXML( eventSourceURL, function( xml, url ) { 
  eventSource.loadXML( xml, url );
} );

The setup seen above works perfectly for a single timeline. But what if we have a loop to create a few timeline widgets?

var dataSources = [ 
  "https://andrejserafim.wordpress.com/?data=1", 
  "https://andrejserafim.wordpress.com/?data=2", 
  "https://andrejserafim.wordpress.com/?data=3" ];

for( var ds in dataSources ) {
  var eventSourceURL = dataSources[ ds ];
  var eventSource = new Timeline.DefaultEventSource( 0 );
  // associate eventSource with timeline through _bands_ configuration
  var timeline = Timeline.create(td, bands, Timeline.HORIZONTAL);
  timeline.loadXML( eventSourceURL, function( xml, url ) { 
    eventSource.loadXML( xml, url );
  } );
}

The result is not anything one could predict, all 3 timelines will have the data from the 3rd data source or no data at all. This happens because the data is loaded at some point after the execution of the code presented has finished. When the anonymous function is created it remembers the reference to the eventSource variable in this loop.

For some reason the context of execution in terms of that one variable is the same for all three timelines.

Fortunately, one can supply a default value to function arguments in Javascript. So we could freeze the reference to eventSource in an array and pass a key as a parameter to the function. Let me show you what I mean:


var dataSources = [ 
  "https://andrejserafim.wordpress.com/?data=1", 
  "https://andrejserafim.wordpress.com/?data=2", 
  "https://andrejserafim.wordpress.com/?data=3" ];

// we are going to distinguish each eventSource
var eventSources = [];

for( var ds in dataSources ) {
  var eventSourceURL = dataSources[ ds ];
  // storing all eventSource values for future asynchronous use.
  eventSources[ ds ] = new Timeline.DefaultEventSource( 0 );
  // associate eventSources[ ds ] with timeline through _bands_ configuration
  var timeline = Timeline.create(td, bands, Timeline.HORIZONTAL);
  // notice the three arguments and the defaults.
  timeline.loadXML( eventSourceURL, function( xml, url, ds ) { 
    eventSources[ ds ].loadXML( xml, url );
  }.defaults( ds ) );
}

Now each anonymous function is associated with its own eventSource. And we get three distinct timelines.

One might notice that the defaults construct is not standard Javascript. It is described in more detail here. And can be added by inserting this code somewhere in the loading section of your page:


Function.prototype.defaults = function()
{
  var _f = this;
  var _a = Array(_f.length-arguments.length).concat(
    Array.prototype.slice.apply(arguments));
  return function()
  {
    return _f.apply(_f, Array.prototype.slice.apply(arguments).concat(
      _a.slice(arguments.length, _a.length)));
  }
}

Standard

3 thoughts on “Javascript arguments by value

  1. zhen says:

    Hi, I tried your codes above. Each band does load from a different source, but the icons for events only appear on the first band. Subsequent bands only have a single stroke instead of the event name and icon. Would appreciate if you could give some advice on that. Thanks in advance!

    • Andrej Kazakov says:

      I has been a while since I was doing this, but as far as I remember I didn’t have any other issues. Is it possible that your configuration for the time lines, i.e. what icons you show, etc is not done well or has similar scope issues?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s