title: Why won't requestAnimationFrame() work while nested inside this if statement?
body: <p>I'm making a tetris game and right now I'm writing the function that drops the piece every 1s(in this case every 800ms). My function looks like this</p>
  
  <pre><code>function drop() {
      //grab the current time
      let now = Date.now();
      //create a var to hold the difference of the current time
      let delta = now - dropStart; //------Why can't these be switched
      if(delta &gt; 800) {
          dropStart = Date.now();
          drawPiece(p.activeTetromino, vacant);
          p.y++;
          drawPiece(p.activeTetromino, p.color);
      }
      requestAnimationFrame(drop);
  }
  
  drop();
  </code></pre>
  
  <p>This does the job just fine. However I'm still a newbie and since I'm copying this code from a tutorial I like to read out the logic top to bottom from a function then rearrange certain lines. For instance I moved the <code>requestAnimationFrame(drop);</code> and put it inside the if statement. So it looks like this</p>
  
  <pre><code> function drop() {
      //grab the current time
      let now = Date.now();
      //create a var to hold the difference of the current time
      let delta = now - dropStart; //------Why can't these be switched
      if(delta &gt; 800) {
          dropStart = Date.now();
          drawPiece(p.activeTetromino, vacant);
          p.y++;
          drawPiece(p.activeTetromino, p.color);
          requestAnimationFrame(drop);
      }
  }
  
  drop();
  </code></pre>
  
  <p>This will brake the function, and you won't see the tetromino piece fall every 800ms. I looked in the dubugger and watched the function execute. I watched it hit the first drawpiece() function which is suppose to remove the current piece(painting over it with the color black). Then increase its position then draw the new piece in its new position. The problem though is it doesn't remove the piece or paint a new one in its new position. However all of that is fixed when requestAnimationFrame(drop); is moved? Why? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// //create your globals
  // const canvas = document.querySelector('#canvas');
  // const ctx = canvas.getContext('2d');
  // const row = 20;
  // const col = 10;
  // const sq = 40;
  // const vacant = 'black';
  
  // //-----------------------Why can't I initialize the tetrominos??
  
  // //create and draw board
  // let board = [];
  // for(let r = 0; r &lt; row; r++) {
  //  board[r] = [];
  //  for(let c = 0; c &lt; col; c++) {
  //   board[r][c] = vacant;
  //   draw(c, r, board[r][c]);
  //  }
  // }
  
  // //define a function to draw to the canvas
  // function draw(x, y, color) {
  //  ctx.fillStyle = color;
  //  ctx.fillRect(x * sq, y * sq, sq, sq);
  //  ctx.strokeStyle = 'white';
  //  ctx.strokeRect(x * sq, y * sq, sq, sq);
  // }
  
  // //create an object for the tetrominos 
  // function Tetromino(tetromino, color) {
  //  this.tetromino = tetromino;
  //  this.color = color;
  //  this.tetrominoN = 0;
  //  this.activeTetromino = this.tetromino[this.tetrominoN];
  //  this.x = 0;
  //  this.y = 0;
  // }
  
  // //create an array for the pieces
  // const pieces = [
  //  [Z, 'red'],
  //  [S, 'limegreen'],
  //  [T, 'yellow'],
  //  [O, 'blue'],
  //  [L, '#b938ff'],
  //  [I, 'cyan'],
  //  [J, 'orange']
  // ]
  
  // //create a new instance of Tetromino
  // function randomPiece() {
  //  let r = Math.floor(Math.random() * pieces.length);
  //  return new Tetromino(pieces[r][0], pieces[r][1]);
  // }
  // let p = randomPiece();
  
  // //draw the piece
  // function drawPiece(piece) {
  //  //loop through the tetromino
  //  for(let r = 0; r &lt; piece.length; r++) {
  //   for(let c = 0; c &lt; piece.length; c++) {
  //    //if the tetromino index is zero skip it
  //    if(!piece[r][c]) continue;
  //    //else draw it
  //    else draw(p.x + c, p.y + r, p.color);
  //   }
  //  }
  // }
  
  // //undrawdraw the piece
  // function undrawPiece(piece) {
  //  //loop through the tetromino
  //  for(let r = 0; r &lt; piece.length; r++) {
  //   for(let c = 0; c &lt; piece.length; c++) {
  //    //if the tetromino index is zero skip it
  //    if(!piece[r][c]) continue;
  //    //else draw it
  //    else draw(p.x + c, p.y + r, vacant);
  //   }
  //  }
  // }
  
  // drawPiece(p.activeTetromino);
  
  // //control the piece 
  // document.addEventListener('keydown', (event) =&gt; {
  //  if(event.keyCode === 37) p.moveLeft();
  
  //  else if (event.keyCode === 38) p.rotate();
  
  //     else if (event.keyCode === 39) p.moveRight();
  
  //  else if (event.keyCode === 40) p.moveDown();
  
  // });
  
  // Tetromino.prototype.moveDown = function() {
  //  if(!this.collision(0, 1, this.activeTetromino)) {
  //   undrawPiece(this.activeTetromino);
  //   this.y++;
  //   drawPiece(this.activeTetromino);
  //  } else {
  //   //lock piece and generate a new one
  //   this.lock();
  //   p = randomPiece();
  //  }
  // }
  
  // Tetromino.prototype.moveLeft = function() {
  //  if(!this.collision(-1, 0, this.activeTetromino)) {
  //   undrawPiece(this.activeTetromino);
  //   this.x--;
  //   drawPiece(this.activeTetromino);
  //  }
  // }
  
  // Tetromino.prototype.moveRight = function() {
  //  if(!this.collision(1, 0, this.activeTetromino)) {
  //   undrawPiece(this.activeTetromino);
  //   this.x++;
  //   drawPiece(this.activeTetromino);
  //  }
  // }
  
  // Tetromino.prototype.rotate = function() {
  //  let nextPattern = this.tetromino[(this.tetrominoN + 1) % 4];
  //  if(!this.collision(0, 0, nextPattern)) {
  //   if(this.tetromino.length &gt; 1) {
  //    undrawPiece(this.activeTetromino);
  //    this.tetrominoN = (this.tetrominoN + 1) % 4; // take paranthesis off
  //    this.activeTetromino = this.tetromino[this.tetrominoN];
  //    drawPiece(this.activeTetromino);
  //   }
  //  }
  // }
  
  // //create a function to check for collisions
  // Tetromino.prototype.collision = function(x, y, piece) {
  //  for(let r = 0; r &lt; piece.length; r++) {
  //   for(let c = 0; c &lt; piece.length; c++) {
  //    //skip index if it is 0
  //    if(!piece[r][c]) continue;
  //    //create vars for the future piece position
  //    let newX = this.x + c + x;
  //    let newY = this.y + r + y;
  //    //see if new position collides with border
  //    if(newX &lt; 0 || newX &gt;= col || newY &gt;= row) return true;
  //    //see if there's a locked piece on the board
  //    if(board[newY][newX] !== vacant) return true;
  //   }
  //  }
  //  return false;
  // }
  
  // Tetromino.prototype.lock = function() {
  //  for(let r = 0; r &lt; this.activeTetromino.length; r++) {
  //   for(let c = 0; c &lt; this.activeTetromino.length; c++) {
  //    if(!this.activeTetromino[r][c]) continue;
  //    //if piece reaches the top its gameover
  //    if(this.y + r &lt; 0) {
  //     gameover = true;
  //     alert('Game Over!');
  //    }
  //    //lock the piece by updating the board
  //    board[this.y + r][this.x + c] = this.color;
  //   }
  //  }
  // }
  
  // let dropStart = Date.now();
  // //drop the piece every 1s
  // function drop() {
  //  let now = Date.now();
  //  let delta = now - dropStart;
  //  //if delta is greater than 1s drop the piece
  //  if(delta &gt; 800) {
  //   p.moveDown();
  //   dropStart = Date.now();
  //  }
  //  requestAnimationFrame(drop);
  // }
  
  // drop();
  
  //declare globals
  const col = 10;
  const row = 20;
  const sq = 40;
  const vacant = 'black';
  const cvs = document.querySelector('#canvas');
  const ctx = cvs.getContext('2d');
  
  //create and draw the board
  let board = [];
  for(let r = 0; r &lt; row; r++) {
   board[r] = [];
   for(let c = 0; c &lt; col; c++) {
    board[r][c] = vacant;
    draw(c, r, board[r][c]);
   }
  }
  
  //create a blueprint function to draw to the board
  function draw(x, y, color) {
   //set the drawing specifications
   ctx.fillStyle = color;
   ctx.fillRect(x * sq, y * sq, sq, sq);
   ctx.strokeStyle = 'white';
   ctx.strokeRect(x * sq, y * sq, sq, sq);
  }
  
  //create a blueprint object for the tetrominos
  function Piece(tetromino, color) {
   //create the properties
   this.tetromino = tetromino;
   this.color = color;
   this.tetrominoN = 0;
   this.activeTetromino = this.tetromino[this.tetrominoN];
   this.x = 0;
   this.y = 0;
  }
  
  //create an array to hold all of the tetrominos
  const pieces = [
   [Z, 'red'],
   [S, 'limegreen'],
   [T, 'yellow'],
   [O, 'blue'],
   [L, '#b938ff'],
   [I, 'cyan'],
   [J, 'orange']
  ]
  
  //grab a piece
  let p = new Piece(pieces[2][0], pieces[2][1]);
  
  //create a blueprint function to draw tetrominos to the board
  function drawPiece(piece, color) {
   for(let r = 0; r &lt; piece.length; r++) {
    for(let c = 0; c &lt; piece.length; c++) {
     if (!piece[r][c]) continue;
     draw(c + p.x, r + p.y, color);
    }
   }
  }
  
  //draw a piece to the board
  drawPiece(p.activeTetromino, p.color);
  
  //start a time to set as a refrence for the dropstart
  let dropStart = Date.now();
  //create a blueprint function to drop the piece
  function drop() {
   //grab the current time
   let now = Date.now();
   //create a var to hold the difference of the current time
   let delta = now - dropStart; //------Why can't these be switched
   if(delta &gt; 800) {
    dropStart = Date.now();
    drawPiece(p.activeTetromino, vacant);
    p.y++;
    drawPiece(p.activeTetromino, p.color);
    requestAnimationFrame(drop);
   }
  }
  
  drop();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;title&gt;Tetris&lt;/title&gt;
   &lt;link href="https://fonts.googleapis.com/css?family=Orbitron&amp;display=swap" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;style&gt;
   body {
    background-color: #595959;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-y: hidden;
   }
   canvas {
    outline: 1px solid white;
   }
   .canvas-wrap {
    padding-left: 50px;
    padding-top: 50px;
    position: relative;
   }
   .num-top, .num-bottom {
    position: absolute;
    top: -1px;
    left: 0;
   }
  
   .num-top {
    width: 100%;
    height: 50px;
   }
  
   .num-bottom {
    height: 100%;
    width: 50px;
   }
   .nb {
    font-family: 'Orbitron';
    color: white;
   }
   .num-wrap-t {
    display: flex;
    justify-content: space-around;
    margin-left: 50px;
    width: 400px;
   }
   .num-wrap-b {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 50px;
    height: 800px;
   }
   .num-wrap-b .nb {
    text-align: right;
    margin-right: 3px;
   }
  
   .num-wrap-t .nb {
    position: relative;
    top: 31px;
   }
  &lt;/style&gt;
  &lt;body&gt;
   &lt;div class="canvas-wrap"&gt;
    &lt;div class="num-top"&gt;
     &lt;div class="num-wrap-t"&gt;
      &lt;div class="nb"&gt;0&lt;/div&gt;
      &lt;div class="nb"&gt;1&lt;/div&gt;
      &lt;div class="nb"&gt;2&lt;/div&gt;
      &lt;div class="nb"&gt;3&lt;/div&gt;
      &lt;div class="nb"&gt;4&lt;/div&gt;
      &lt;div class="nb"&gt;5&lt;/div&gt;
      &lt;div class="nb"&gt;6&lt;/div&gt;
      &lt;div class="nb"&gt;7&lt;/div&gt;
      &lt;div class="nb"&gt;8&lt;/div&gt;
      &lt;div class="nb"&gt;9&lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;canvas id="canvas" width="400" height="800"&gt;&lt;/canvas&gt;
    &lt;div class="num-bottom"&gt;
     &lt;div class="num-wrap-b"&gt;
      &lt;div class="nb"&gt;0&lt;/div&gt;
      &lt;div class="nb"&gt;1&lt;/div&gt;
      &lt;div class="nb"&gt;2&lt;/div&gt;
      &lt;div class="nb"&gt;3&lt;/div&gt;
      &lt;div class="nb"&gt;4&lt;/div&gt;
      &lt;div class="nb"&gt;5&lt;/div&gt;
      &lt;div class="nb"&gt;6&lt;/div&gt;
      &lt;div class="nb"&gt;7&lt;/div&gt;
      &lt;div class="nb"&gt;8&lt;/div&gt;
      &lt;div class="nb"&gt;9&lt;/div&gt;
      &lt;div class="nb"&gt;10&lt;/div&gt;
      &lt;div class="nb"&gt;11&lt;/div&gt;
      &lt;div class="nb"&gt;12&lt;/div&gt;
      &lt;div class="nb"&gt;13&lt;/div&gt;
      &lt;div class="nb"&gt;14&lt;/div&gt;
      &lt;div class="nb"&gt;15&lt;/div&gt;
      &lt;div class="nb"&gt;16&lt;/div&gt;
      &lt;div class="nb"&gt;17&lt;/div&gt;
      &lt;div class="nb"&gt;18&lt;/div&gt;
      &lt;div class="nb"&gt;19&lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
      &lt;/div&gt;  
   &lt;script src="tetrominos.js"&gt;&lt;/script&gt;
   &lt;script src="tetris.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt; --&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;title&gt;Tetris&lt;/title&gt;
   &lt;link href="https://fonts.googleapis.com/css?family=Orbitron&amp;display=swap" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;style&gt;
   body, html {
    padding: 0;
    margin: 0;
   }
  
   body {
    background-color: #595959;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
   }
  
   canvas {
    outline: 1px solid white;
   }
   .canvas-wrap {
    padding-left: 50px;
    padding-top: 50px;
    position: relative;
   }
   .num-top, .num-bottom {
    position: absolute;
    top: -1px;
    left: 0;
   }
  
   .num-top {
    width: 100%;
    height: 50px;
   }
  
   .num-bottom {
    height: 100%;
    width: 50px;
   }
   .nb {
    font-family: 'Orbitron';
    color: white;
   }
   .num-wrap-t {
    display: flex;
    justify-content: space-around;
    margin-left: 50px;
    width: 400px;
   }
   .num-wrap-b {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 50px;
    height: 800px;
   }
   .num-wrap-b .nb {
    text-align: right;
    margin-right: 3px;
   }
  
   .num-wrap-t .nb {
    position: relative;
    top: 31px;
   }
  &lt;/style&gt;
  &lt;body&gt;
   &lt;div class="canvas-wrap"&gt;
    &lt;div class="num-top"&gt;
     &lt;div class="num-wrap-t"&gt;
      &lt;div class="nb"&gt;0&lt;/div&gt;
      &lt;div class="nb"&gt;1&lt;/div&gt;
      &lt;div class="nb"&gt;2&lt;/div&gt;
      &lt;div class="nb"&gt;3&lt;/div&gt;
      &lt;div class="nb"&gt;4&lt;/div&gt;
      &lt;div class="nb"&gt;5&lt;/div&gt;
      &lt;div class="nb"&gt;6&lt;/div&gt;
      &lt;div class="nb"&gt;7&lt;/div&gt;
      &lt;div class="nb"&gt;8&lt;/div&gt;
      &lt;div class="nb"&gt;9&lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;canvas id="canvas" width="400" height="800"&gt;&lt;/canvas&gt;
    &lt;div class="num-bottom"&gt;
     &lt;div class="num-wrap-b"&gt;
      &lt;div class="nb"&gt;0&lt;/div&gt;
      &lt;div class="nb"&gt;1&lt;/div&gt;
      &lt;div class="nb"&gt;2&lt;/div&gt;
      &lt;div class="nb"&gt;3&lt;/div&gt;
      &lt;div class="nb"&gt;4&lt;/div&gt;
      &lt;div class="nb"&gt;5&lt;/div&gt;
      &lt;div class="nb"&gt;6&lt;/div&gt;
      &lt;div class="nb"&gt;7&lt;/div&gt;
      &lt;div class="nb"&gt;8&lt;/div&gt;
      &lt;div class="nb"&gt;9&lt;/div&gt;
      &lt;div class="nb"&gt;10&lt;/div&gt;
      &lt;div class="nb"&gt;11&lt;/div&gt;
      &lt;div class="nb"&gt;12&lt;/div&gt;
      &lt;div class="nb"&gt;13&lt;/div&gt;
      &lt;div class="nb"&gt;14&lt;/div&gt;
      &lt;div class="nb"&gt;15&lt;/div&gt;
      &lt;div class="nb"&gt;16&lt;/div&gt;
      &lt;div class="nb"&gt;17&lt;/div&gt;
      &lt;div class="nb"&gt;18&lt;/div&gt;
      &lt;div class="nb"&gt;19&lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;script src="tetrominos.js"&gt;&lt;/script&gt;  
   &lt;script src="tetris.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>