Problems in accessing global variables

Question

I am having some problems in accessing a global variable attached to the window in javascript. Here is my code snippet which I have embedded in my index page using script tag lets say

var Geolocation = function() {
  var self = this;

  self.errors = {
    TIMEOUT: 1,
    POSITION_UNAVAILABLE: 2,
    PERMISSION_DENIED: 3,
    UNKNOWN_ERROR: 4
  };

  self.getCurrentPosition = function( success, error, options ) {
    // simulate the wait for the user choice
    var geoIntervalId = window.setInterval(function( ) {
      if ( state != null ) {
        window.clearInterval(geoIntervalId);

        switch( state ) {
          case 'ok':
            success(new Position(latitude, longitude));
            break;
          case 'timeout': case 'position_unavailable': case 'permission_denied':
            error( new GeolocationError( self.errors[state.toUpperCase()] ) );
            break;
          default:
            error( new GeolocationError( self.errors.UNKNOWN_ERROR ) );
        }
      }
    }, 100); // ms
  };
}

var Position = function( lat, lng ) {
  this.coords = new Coordinates(lat, lng);
}

var Coordinates = function( lat, lng ) {
  this.latitude  = lat;
  this.longitude = lng;
}

var GeolocationError = function( code ) {
  this.TIMEOUT = 1;
  this.POSITION_UNAVAILABLE = 2;
  this.PERMISSION_DENIED = 3;
  this.UNKNOWN_ERROR = 4;

  this.code = code;
}

var state     = null,
    latitude  = null,
    longitude = null;

window.geolocation_provider = new Geolocation();

After this I have included another javascript file say test.js in the index file again using the script tag. Now when I try to access the window.geolocation_provider variable, it is turning out to be null. Why is it so

Answer 1

The problem may be that certain files execute before / after other files; ideally, this problem is solved by ensuring that all your javascript function definitions are loaded before executing any important code.

You may want to take a look at the Module pattern in javascript. There are a few other questions that deal with this problem, such as this one .

Answer 2

Try this

(function(window){
  var Geolocation = function() {
  var self = this;

  self.errors = {
    TIMEOUT: 1,
    POSITION_UNAVAILABLE: 2,
    PERMISSION_DENIED: 3,
    UNKNOWN_ERROR: 4
  };

  self.getCurrentPosition = function( success, error, options ) {
    // simulate the wait for the user choice
    var geoIntervalId = window.setInterval(function( ) {
      if ( state !== null ) {
        window.clearInterval(geoIntervalId);

        switch( state ) {
          case 'ok':
            success(new Position(latitude, longitude));
            break;
          case 'timeout': case 'position_unavailable': case 'permission_denied':
            error( new GeolocationError( self.errors[state.toUpperCase()] ) );
            break;
          default:
            error( new GeolocationError( self.errors.UNKNOWN_ERROR ) );
        }
      }
    }, 100); // ms
  };
};

var Position = function( lat, lng ) {
  this.coords = new Coordinates(lat, lng);
};

var Coordinates = function( lat, lng ) {
  this.latitude  = lat;
  this.longitude = lng;
};

var GeolocationError = function( code ) {
  this.TIMEOUT = 1;
  this.POSITION_UNAVAILABLE = 2;
  this.PERMISSION_DENIED = 3;
  this.UNKNOWN_ERROR = 4;

  this.code = code;
};

var state     = null,
    latitude  = null,
    longitude = null;
if(window.geolocation_provider === undefined){
    window.geolocation_provider = new Geolocation();
}
})(window ? window : this)