requestAnimationFrame обновление кадров

Код:

const canvas = document.getElementById('myCanvas');
  let ctx = canvas.getContext('2d');
  let width = canvas.width, height = canvas.height;
  let player = {
    speed: 5,
    gravity: 10,
    x: 0,
    y: 250, //250
    width: 64,
    height: 64,
    sx: 0, // 64
    sy: 710,
    sw: 64,
    sh: 64,
    skin: 'img/skin.png',
    tick_count: 0
  };
  let player_skin = new Image();
  player_skin.src = player.skin;
  player_skin.onload = function() {
    requestAnimationFrame(gameLoop);
  }

  let gameLoop = function() {
    drawImage();
    requestAnimationFrame(gameLoop);
  }

  function drawImage() {
    if (player.sx == 512) {
      player.sx = 0;
    }
    player.sx += player.sw;
    ctx.clearRect(0, 0, width, height);
    ctx.drawImage(player_skin, player.sx, player.sy, player.sw, player.sh, player.x, player.y, player.width, player.height);
  }

У меня рекурсивно вызывается функция, которая отрисовывает кадры на холст с помощью requestAnimationFrame. У меня возникла проблема, то что кадры прорисовываются очень быстро(и был эффект флэша); Я добавил код в gameLoop

if (player.tick_count >= 9) {
      drawImage();
      player.tick_count = 0;
    }
    player.tick_count++;

Проблема решена. Пожалуйста объясните как работает этот код с tick_count? Почему если увеличь значение кадры рисуются медленнее, и если уменьшить, то все наоборот. requestAnimationFrame по сути обновляет функцию каждый 60ms из-за этого?