title: Javascript - How do I make my specific function blocking?
body: <p>Quick query that's confusing me.</p>
  
  <p>Doing this: <code>console.dir(playerObjects);</code></p>
  
  <p>Returns this:</p>
  
  <pre><code>Array[0]
  0: hiderGameClient.obj.player
  1: hiderGameClient.obj.player
  length: 2
  __proto__: Array[0]
  </code></pre>
  
  <p>But when I do this: <code>console.dir(playerObjects[0]);</code></p>
  
  <p>It returns this:</p>
  
  <pre><code>undefined
  </code></pre>
  
  <p>When the expected result should be this:</p>
  
  <pre><code>0: hiderGameClient.obj.player
      displayObject: 1
      location: Array[2]
      name: "asdf"
     __proto__: Object
  </code></pre>
  
  <p>Any ideas what's happening?</p>
  
  <p>I can't really post a fiddle as it's calling data from node using websockets.</p>
  
  <p>Creating the array of objects:</p>
  
  <pre><code>data.forEach(function(obj) {
      var tmp = new hiderGameClient.obj.player();
      tmp.name = obj.displayName; // Gonna actually skip this binding after it's fixed
      tmp.location = obj.pos;
      tmp.displayObject = obj.object;
      playerObjects.push(tmp);
  });
  </code></pre>
  
  <p><strong>Edit 2:</strong></p>
  
  <pre><code>hiderGameClient.gfx.updateGame = function() {
      playerObjects = [];
      getAllPlayerData = hiderGameClient.net.getAllPlayerData(function(data){
          data.forEach(function(obj) {
              var tmp = new hiderGameClient.obj.player();
              tmp.name = obj.displayName; // Gonna actually skip this binding after it's fixed
              tmp.location = obj.pos;
              tmp.displayObject = obj.object;
              playerObjects.push(tmp);
          });
      });
  };
  
  hiderGameClient.gfx.drawGame = function() {
      console.dir(playerObjects[0].toString());
      console.log("typeof playerObjects: " + typeof playerObjects);
      console.log("typeof playerObjects[0]: " + typeof playerObjects[0]);
  
      playerObjects.forEach(function(obj) {
          var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');
          var imageObj = new Image();
          imageObj.onload = function() {
              context.drawImage(imageObj, 200, 300);
          };
          imageObj.src = './maps/' + map + '/obj/' + '1' + '.png';
      });
  };
  hiderGameClient.net.getAllPlayerData = function(callback) {
      socket.emit('whereare players', {timestamp: new Date().getTime()});
      socket.on('answer playerPositions', function(data) {
          callback(data);
      });
  }
  </code></pre>
  
  <p><strong>Edit 3:</strong></p>
  
  <p>Forgot main loop function:</p>
  
  <pre><code>hiderGameClient.gfx.mainloop = function() {
      this.updateGame();
      this.drawGame();
  };
  </code></pre>