title: Promises say they are done when they are not?
body: <p>I have a browser game that has to load some things before it starts. I have encapsulated all the loading into two promises.</p>
  <pre><code>var promise1 = new Promise(function(resolve, reject) { ...loading stuff here... resolve() });
  var promise2 = new Promise(function(resolve, reject) { ...loading stuff here... resolve() });
  </code></pre>
  <p>Then I have put a function that starts the game loops in the following</p>
  <pre><code>Promise.all([promise1, promise2]).then(setInterval(GameLoop, time));
  </code></pre>
  <p>EDIT: adding <code>() =&gt;</code> to the above code hasn't resolved the issue.</p>
  <p>The problem is that, although everything starts up and runs fine, it still throws four frames of errors before everything loads. I thought promises were supposed to wait until the code inside them did its thing.</p>
  <p>I'm not really sure what's gone wrong. Probably some fundamental thing about javascript that I've missed. Browser isn't throwing any errors other than it can't find one variable for 4 - 5 frames right at the start.</p>
  <p>Original code:</p>
  <pre><code>//{ DATA
      var promise_loadClient = new Promise ((resolve, reject) =&gt; {
      
          //{ LOAD DISPLAY OBJECTS
              //Objects required for displaying elements of the game
              window.canvasb = document.getElementById('screen_board');
              window.ctxb = canvasb.getContext('webgl',{ alpha: false });
              ctxb.clearColor(100.0, 0.0, 0.0, 1.0);
              canvasb.width = window.innerWidth;
              canvasb.height = window.innerHeight - element_navbar.offsetHeight;
              
              window.pixi_app = new PIXI.Application({
                  view: canvasb,
                  antialias: true,
                  width: window.innerWidth,
                  height: window.innerHeight - element_navbar.offsetHeight
              });
              
              window.graphics = new PIXI.Graphics();      
              
              window.canvas = document.getElementById('screen_entities');
              window.ctx = canvas.getContext('2d',{ alpha: true });
                  //ctx.imageSmoothingEnabled = false;
                  //ctx.webkitImageSmoothingEnabled = false;
                  //ctx.mozImageSmoothingEnabled = false;
                  ctx.translate(0.5,0.5);
  
          //}
  
          //{ GAME LOOP VARS
              window.step = 1; //frame time target (ms)
              window.timein = 0  //vars for recording loop time
              window.timeout = 0;
              window.averageTimes = [];
          //}
  
          //{ LOAD TEXT DISPLAY OBJECTS
              window.element_timer = document.getElementById('timer'); //Time repurposed as debug window
                     element_timer.style.left = -1000; //hide the debug window
              window.element_highscores = document.getElementById('highscores'); //High score display
              window.element_moveindicator = document.getElementById('moveindicator'); // Moves left indicator
          //}
      
          window.mouseX = 0; window.mouseY = 0; //TODO: embed in playerview
          resolve();
      });
  //}
  </code></pre>
  <p>And</p>
  <pre><code>var promise_loadManager = new Promise ( (resolve, reject) =&gt; {
      //{ DATA LOAD
  
          //Images
          window.texture_blackrook = new PIXI.Texture.from('../assets/images/rookblack.png');
          window.texture_blackpawn = new PIXI.Texture.from('../assets/images/pawnblack.png');
          window.texture_blackking = new PIXI.Texture.from('../assets/images/kingblack.png');
          window.texture_blackqueen = new PIXI.Texture.from('../assets/images/queenblack.png');
          window.texture_blackbishop = new PIXI.Texture.from('../assets/images/bishopblack.png');
          window.texture_blackknight = new PIXI.Texture.from('../assets/images/knightblack.png');
          
          window.texture_whiterook = new PIXI.Texture.from('../assets/images/rookwhite.png');
          window.texture_whitepawn = new PIXI.Texture.from('../assets/images/pawnwhite.png');
          window.texture_whiteking = new PIXI.Texture.from('../assets/images/kingwhite.png');
          window.texture_whitequeen = new PIXI.Texture.from('../assets/images/queenwhite.png');
          window.texture_whitebishop = new PIXI.Texture.from('../assets/images/bishopwhite.png');
          window.texture_whiteknight = new PIXI.Texture.from('../assets/images/knightwhite.png');
          
          window.texture_greyrook = new PIXI.Texture.from('../assets/images/rookgrey.png');
          window.texture_greypawn = new PIXI.Texture.from('../assets/images/pawngrey.png');
          window.texture_greyking = new PIXI.Texture.from('../assets/images/kinggrey.png');
          window.texture_greyqueen = new PIXI.Texture.from('../assets/images/queengrey.png');
          window.texture_greybishop = new PIXI.Texture.from('../assets/images/bishopgrey.png');
          window.texture_greyknight = new PIXI.Texture.from('../assets/images/knightgrey.png');
          
          window.texture_whitearrow = new PIXI.Texture.from('../assets/images/arrow01.png');
          
          window.texture_tilelight = PIXI.Texture.from('../assets/images/tilelight.bmp');
          
          //{OLD IMAGES - TO BE REPLACED SOON
          window.img_blackking = new Image(1,1); img_blackking.src = '../assets/images/kingblack.png';
          window.img_blackqueen = new Image(1,1); img_blackqueen.src = '../assets/images/queenblack.png';
          window.img_blackbishop = new Image(1,1); img_blackbishop.src = '../assets/images/bishopblack.png';
          window.img_blackrook = new Image(1,1); img_blackrook.src = '../assets/images/rookblack.png';
          window.img_blackknight = new Image(1,1); img_blackknight.src = '../assets/images/knightblack.png';
          window.img_blackpawn = new Image(1,1); img_blackpawn.src = '../assets/images/pawnblack.png';
          
          window.img_whiteking = new Image(1,1); img_whiteking.src = '../assets/images/kingwhite.png';
          window.img_whitequeen = new Image(1,1); img_whitequeen.src = '../assets/images/queenwhite.png';
          window.img_whitebishop = new Image(1,1); img_whitebishop.src = '../assets/images/bishopwhite.png';
          window.img_whiterook = new Image(1,1); img_whiterook.src = '../assets/images/rookwhite.png';
          window.img_whiteknight = new Image(1,1); img_whiteknight.src = '../assets/images/knightwhite.png';
          window.img_whitepawn = new Image(1,1); img_whitepawn.src = '../assets/images/pawnwhite.png';
          
          window.img_greyking = new Image(1,1); img_greyking.src = '../assets/images/kinggrey.png';
          window.img_greyqueen = new Image(1,1); img_greyqueen.src = '../assets/images/queengrey.png';
          window.img_greybishop = new Image(1,1); img_greybishop.src = '../assets/images/bishopgrey.png';
          window.img_greyrook = new Image(1,1); img_greyrook.src = '../assets/images/rookgrey.png';
          window.img_greyknight = new Image(1,1); img_greyknight.src = '../assets/images/knightgrey.png';
          window.img_greypawn = new Image(1,1); img_greypawn.src = '../assets/images/pawngrey.png';
          
          window.img_whitearrow = new Image(1,1); img_whitearrow.src = '../assets/images/arrow01.png';
          //}
          
          //Sounds
          window.sound_swipe = new Audio(&quot;../assets/sounds/chess_swipe.mp3&quot;);
          window.sound_ticking = new Audio(&quot;../assets/sounds/chess_ticking3.mp3&quot;);
          window.sound_turnbell = new Audio(&quot;../assets/sounds/chess_softbell.mp3&quot;);
          window.sound_swish = new Audio (&quot;../assets/sounds/chess_swish.mp3&quot;);
          window.sound_tap = new Audio (&quot;../assets/sounds/chess_tap.mp3&quot;);
          
          
          //Fetch elements
          window.element_timer = document.getElementById('timer'); //TEMP RENDER TIMER
          window.element_highscores = document.getElementById('highscores'); //TEMP RENDER TIMER
          window.element_moveindicator = document.getElementById('moveindicator');
          
          // Env
          window.manager = new GameManager (&quot;inactive&quot;, Date.now(), 10000); // Create manager, let it be altered later in the script
  
  
      //}
  
      //{ CONNECT TO SERVER
          
          
          window.socket = io('//localhost:3001'); 
      //}
  
      //{ PLAYER INFO
          //Information about the player's id and game choices.
          
          //{ Get room request from URL and send to server!
              window.roomRequest = window.location.search.split(&quot;=&quot;)[1];
              socket.emit(&quot;requestboard&quot;, parseInt(roomRequest));
          //}
          
          //{ Get nickname from cookies, if not there ask for one. To be replaced by user auth interface
              window.nickname = CookieIO.GetCookieByName(&quot;nickname&quot;);
              if(nickname == null)
              {
                  nickname = window.prompt(&quot;Please enter a nickname. Max 16 characters. (To change nickname, you'll need to clear cookies for this site)&quot;);
                  nickname = nickname.substring(0,16);
                  CookieIO.SetCookieByName(&quot;nickname&quot;, nickname, 365); 
              }
          //}
  
      //}
  
      //{ SERVER LOAD
          //{ Setup game - create board from server details and recieve pieces information
              socket.on('newboard', function(msg){
              
                  console.log(&quot;SERVER: New Board&quot;);
  
                  //Create board object from server
                  window.manager = new GameManager(&quot;inactive&quot;,0,0);
                  window.board = new ChessBoard(msg.chessBoard.radius,
                                         msg.chessBoard.randomRange,
                                         msg.chessBoard.randomLimit,
                                         new HexColor(msg.chessBoard.colorLight),
                                         new HexColor(msg.chessBoard.colorDark),
                                         msg.chessBoard.shading_radius,
                                         msg.chessBoard.shading_innerStop,
                                         msg.chessBoard.shading_outerStop,
                                         msg.chessBoard.shading_innerAlpha,
                                         msg.chessBoard.shading_outerAlpha
                                         );
                  //Precalculate as may variables as possible.
                  window.boardSprites = new ObjectRegister(board.radius * 2, board.radius * 2);
                  window.boardViable = new ObjectRegister(board.radius*2, board.radius * 2);          
                      PreCalcBoardSprites(boardSprites, board, texture_tilelight);
                      PreCalcTileRNGViable(boardViable);
                  
                      
                  
                  window.client = new PlayerData(msg.playerID, msg.roomName);
                  client.nickname = nickname;
                  
                  //and create a way to view it with player!
                  window.player = new PlayerView(board.radius, board.radius,4);
                      player.viewportBoardMaxX = board.radius * 2;
                      player.viewportBoardMaxY = board.radius * 2;
                      player.viewportMoved = true;
                          
                  window.pieces = new ChessPieceRegister(board.radius * 2, board.radius * 2);
                  window.deadPieces = [];
                  for(i = 0; i &lt; msg.chessPieceRegister.length; i++){     
                      pieces.NewPiece(parseInt(msg.chessPieceRegister[i].positionX),
                                      parseInt(msg.chessPieceRegister[i].positionY), 
                                      msg.chessPieceRegister[i].type,
                                      msg.chessPieceRegister[i].team,
                                      msg.chessPieceRegister[i].playerID);
                  }
  
                  isLoaded = true; //Once these things are loaded, then the game should be good to go.
                  //A board will display and the player can look around. 
              });
              socket.on('newplayerpieces', function (msg){
                  console.log(&quot;SERVER: newplayerpieces&quot;);
                  let tempPiece = null;
                  for(i = 0; i &lt; msg.length; i++)
                  {   
                      tempPiece = pieces.GetPiece(parseInt(msg[i].positionX), parseInt(msg[i].positionY));
                      
                      if(tempPiece != null)
                      {
                          oldX = tempPiece.oldPositionX;
                          oldY = tempPiece.oldPositionY;
                          displayX = tempPiece.displayPositionX;
                          displayY = tempPiece.displayPositionY;
                          pieces.NewOldPiece(parseInt(msg[i].positionX),
                                                        parseInt(msg[i].positionY),
                                                        msg[i].type,
                                                        msg[i].team,
                                                        msg[i].playerID,
                                                        oldX,
                                                        oldY,
                                                        displayX,
                                                        displayY);
                      }
                      else
                      {
                          pieces.NewPiece(parseInt(msg[i].positionX), parseInt(msg[i].positionY), msg[i].type, msg[i].team, msg[i].playerID);
                      }
                  }
                  
                  client.pieces = pieces.GetPiecesByID(client.playerID);
                  kings = pieces.GetPiecesByIDType(client.playerID, &quot;king&quot;);
                  client.king = kings[0]; //fuck it, we'll only have the one king
                  client.team = client.king.team;
                  
                  player.positionX = client.king.positionX; //Change to a lerp
                  player.positionY = client.king.positionY;
  
                  isLoadedPieces = true;
  
              }); 
          //}
      //}
  
      //{ SERVER IO
          //{ Message from server.
              socket.on('messagefromserver', function (msg){
              msgs = msg.split('/');
              
              if (msgs[0] == &quot;alert&quot;){
                  window.alert(msgs[1]);
              } else {
                  console.log(&quot;SERVER: Message from server: &quot; + msgs[1]);
              }
          });
          //}
  
          //{ Game Management (turns)
              socket.on('newturn', function(msg){
              console.log(&quot;SERVER: new turn: &quot; + msg + &quot;localnumber: &quot; + (manager.turnNumber + 1));
              //sound_turnbell.volume = 0.5;
              //sound_turnbell.play();
              
              msgs = msg.split(&quot;/&quot;);
              
              manager.turnStart = Date.now();
              manager.turnAge = parseInt(msgs[0]);        //0, usually
              manager.turn = msgs[1];         //Color
              manager.gameState = msgs[2];    //Active
              manager.turnTime = msgs[3];     //How long in ms (5000)
              manager.turnTimeMax = msgs[3];  // &quot;
              manager.movesLeft = parseInt(msgs[4]) + Math.floor(MyMath.Clamp(-16 + client.pieces.length, 0 ,50) / 4);
              //viewport.viewportMoved = true;
              if(client.king != null) manager.actualScore ++;
              
              
              manager.turnNumber ++;
              
          });
          //}
  
          //{ Deal with player interactions
              socket.on('newmove', function(msg){
                  console.log(&quot;SERVER: new move: &quot; + msg);
  
                  sound_swipe.play();
                  
                  
                  moves = msg.split(&quot;/&quot;);
                  let oldPiece = pieces.GetPiece(moves[3], moves[4]);
                  piece = pieces.GetPiece(parseInt(moves[1]),parseInt(moves[2]));
                  let killerPiece = piece;
                  piece.oldMoveGizmoEnd = Date.now() + (manager.turnTimeMax * 3);
                  piece.oldMoveGizmoStart = Date.now();
                  piece.hasMovedThisTurn = true;
                  pieces.MovePiece(piece, parseInt(moves[3]),parseInt(moves[4]));
                  if(piece.playerID == client.playerID) manager.Move();
  
  
                  
                  if(oldPiece != null) {
                      deadPieces.push(new DeadPiece(oldPiece, 0, killerPiece));
                      manager.actualScore += oldPiece.rank;
                  }
                      
                  client.pieces = pieces.GetPiecesByID(client.playerID);
                  player.viewportMoved = true;
              });
              socket.on('removeplayer', function(msg){
                  console.log(&quot;SERVER: Remove Player: &quot; + msg);
                  pieces.RemovePiecesById(msg);
                  player.viewportMoved = true;
              }); 
              socket.on('killplayer', function(msg){
                  console.log(&quot;SERVER: Killplayer: &quot; + msg);
                  msgs = msg.split(&quot;/&quot;);
                  pieces.KillPlayer(msgs[0], msgs[1], msgs[2]);
                  player.viewportMoved = true;
                  client.pieces = pieces.GetPiecesByID(client.playerID);
              });
              socket.on('changeteamofpiece', function (msg){
                  
                      console.log(&quot;SERVER: change team of piece&quot;, msg);
                      msgs = msg.split(&quot;/&quot;);
                      pieces.ChangeTeamOfPiece(msgs[0], msgs[1], msgs[2], msgs[3]);
                      player.viewportMoved = true;
                  });
              socket.on('newscores', function(msg) {
                  console.log(&quot;SERVER: newscores: &quot;, msg);
                  msg.sort(function(a, b){return b.score-a.score});   
                  manager.allScoresNew = msg;
                  
              });
          //}
  
      //}
      
      window.gameInitialized = true
      resolve();
  });
  </code></pre>
  <p>And</p>
  <pre><code>Promise.all([promise_loadClient, promise_loadManager]).then( () =&gt; setInterval(GameLoop, step) );
  </code></pre>