javascript - A variable that I've initialized is undefined when I try to use it on the next line of code -

i'm developing web application heavily using javascript , jquery.

i create app object when web page loads , call init() method in footer.

var app = new app(); app.init(); 

these first lines of code in init() method.

// load index app.loadindex();  alert(hashtag_index); 

these few lines of loadindex() method.

hashtag_index  = [];  // load topic json file $.ajax({     url : './data/index.json',      type : 'get',      datatype : 'json',      .     .     .      // if file loading successful, save index data     success : function(data){      var raw_index = [];      $.each(data, function(key, val) {         raw_index.push(data[key]);     });      // add hashtag object global hashtag_index     hashtag_index = raw_index;      } }); 

basically loadindex() method loads json file 135kb , load data object hashtag_index variable. hashtag_index variable defined global, it's accessible globally.

the variable hashtag index have 8 different object arrays. during when try alert() variable, variable isn't initialized yet.

but alert() returns blank message. when return message:

alert(typeof(hashtag_index)) 

i undefined message.

but i'm sure variable loaded because, when access variable via google chrome's console, can see variable loaded , objects in there.

the solved problem using line of code:

// load index app.loadindex();  settimeout( function(){      alert(hashtag_index);  }, 500); 

by making javascript sleep 500 ms, i've given enough time load up.

of course i've tried following solutions none of them succeeded:

solution 1: (goes infinite loop)

// load index app.loadindex();  while(!hashtag_index.length > 0) {      continue;  };  alert(hashtag_index); 

solution 2: (goes infinite loop)

// load index app.loadindex();  while(hashtag_index.length == 0) {      continue;  };  alert(hashtag_index); 

solution 3: (goes infinite loop)

// load index app.loadindex();  while(typeof hashtag_index === 'undefined') {      continue;  };  alert(hashtag_index); 

solution 4:* (goes infinite loop)

// load index app.loadindex();   while(typeof hashtag_index == null) {      continue;  };  alert(hashtag_index); 

now question how can solve problem without causing future problems. i've tried tackle problem previous solutions, none of them have succeeded properly.

your app.loadindex(); method uses ajax, async. alert(hashtag_index); executes before ajax call has completed , result processed.

change code use callback, or (my preference) have app.loadindex(); return promise object.

here's how implement promise:

var loadindex = function() {     var def = $.deferred();      $.ajax({         //...         success: function(result) {             // whatever             def.resolve();         }         //...     });         return def.promise(); }; 

....

// load index app.loadindex().done(function() {     alert(hashtag_index); }); 

you may need extend have init() return promise or accept "finished" callback well, depending on usage.