Setinterval seems to be running at 1500 ms instead of 50ms

Question

I have a set interval function that seems to be running at 1500ms though it is set to 50ms. If you look at this script, it shrinks an element and shakes it a few degrees, I want it to run smoothly thought it is truly running at roughly ~1500ms. Any help? Changing the setInterval form 1000 to 500 has little to no effect and that trend continues as your continue to halve the value. I can't seem to find anything online on why this might be...

   var rotated = false;
var height = 24.6;
var width = 15

var points = 0;
var cutvalw = 1;
var cutvalh = 1.64;
var val = 10;


document.querySelector("#box").addEventListener("click", function () {
  width = width - cutvalw;
  height = height - cutvalh;
  var div = document.getElementById("box"),
      deg = rotated ? 0 : 22;

  div.style.webkitTransform = "rotate("+deg+"deg)";
  div.style.mozTransform    = "rotate("+deg+"deg)";
  div.style.msTransform     = "rotate("+deg+"deg)";
  div.style.oTransform      = "rotate("+deg+"deg)";
  div.style.transform       = "rotate("+deg+"deg)";

  setTimeout(res, 140);
});
 function res() {
  var div = document.getElementById("box"),
      deg = rotated ? 0 : 0;
  div.style.webkitTransform = "rotate("+deg+"deg)";
  div.style.mozTransform    = "rotate("+deg+"deg)";
  div.style.msTransform     = "rotate("+deg+"deg)";
  div.style.oTransform      = "rotate("+deg+"deg)";
  div.style.transform       = "rotate("+deg+"deg)";
  }
setInterval(gamerule, 50);
function gamerule() {
   var div = document.getElementById("box");
  div.style.width           = width + "%";
  div.style.height          = height + "%";

  if (width < 1) {
    width = 15;
     height = 24.6;
    document.getElementById("cont").style.pointerEvents = "none";
    setInterval(ser, 1000);
    points++;
    function ser() {
         document.getElementById("cont").style.pointerEvents = "all";
    }
   }
}



setInterval(gamefunc, 500);

function gamefunc() {
  if (val >= 10) {
  width = width - .5;
  height = height - .5;
   var div = document.getElementById("box"),
      deg = rotated ? 0 : 22;

  div.style.webkitTransform = "rotate("+deg+"deg)";
  div.style.mozTransform    = "rotate("+deg+"deg)";
  div.style.msTransform     = "rotate("+deg+"deg)";
  div.style.oTransform      = "rotate("+deg+"deg)";
  div.style.transform       = "rotate("+deg+"deg)";

  setTimeout(res, 140);
};
  function res() {
 var div = document.getElementById("box"),
       deg = rotated ? 0 : 0;
  div.style.webkitTransform = "rotate("+deg+"deg)";
  div.style.mozTransform    = "rotate("+deg+"deg)";
   div.style.msTransform     = "rotate("+deg+"deg)";
  div.style.oTransform      = "rotate("+deg+"deg)";
  div.style.transform       = "rotate("+deg+"deg)";
 val = 9;
   setTimeout(game, 1000);
  function game() {
    val = 10;
  }
  }
}

Answer 1

You might have an issue with your curly braces, but I can't quite tell what you're trying to do. The function "gameFunc" is actually creating a function called "res" on every execution, and only running the transformations if val is greater than or equal to 10. Naturally, creating a function doesn't actually execute the function, so that's probably why the interval doesn't appear to fire.

Perhaps:

setInterval(gamefunc, 500);

function gamefunc() {
    if (val >= 10) {
       width = width - .5;
       height = height - .5;
       var div = document.getElementById("box"),
       deg = rotated ? 0 : 22;

       div.style.webkitTransform = "rotate("+deg+"deg)";
       div.style.mozTransform    = "rotate("+deg+"deg)";
       div.style.msTransform     = "rotate("+deg+"deg)";
       div.style.oTransform      = "rotate("+deg+"deg)";
       div.style.transform       = "rotate("+deg+"deg)";
   }
   setTimeout(res, 140);
};
function res() {
    var div = document.getElementById("box"),
    deg = rotated ? 0 : 0;
    div.style.webkitTransform = "rotate("+deg+"deg)";
    div.style.mozTransform    = "rotate("+deg+"deg)";
    div.style.msTransform     = "rotate("+deg+"deg)";
    div.style.oTransform      = "rotate("+deg+"deg)";
    div.style.transform       = "rotate("+deg+"deg)";
    val = 9;
    setTimeout(game, 1000);
}
function game() {
    val = 10;
}