Javascript Setinterval似乎以1500毫秒而不是50毫秒的速度运行

我有一个设置间隔的功能，似乎是运行在1500毫秒，虽然它被设置为50毫秒。如果你看这个脚本，它收缩了一个元素，并摇晃了几度，我希望它运行平稳，虽然它确实在大约1500ms的速度下运行。有什么帮助吗？将setInterval从1000更改为500几乎没有任何效果，并且随着您继续将该值减半，这种趋势将持续下去。我似乎在网上找不到任何关于为什么这可能是

   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;
  }
  }
}

var=false；
var高度=24.6；
可变宽度=15
var点=0；
var cutvalw=1；
var cutvalh=1.64；
var=10；
document.querySelector（#box”）.addEventListener（“单击”，函数（）{
宽度=宽度-截面宽度；
高度=高度-cutvalh；
var div=document.getElementById（“框”），
度=旋转？0:22；
div.style.webkitttransform=“旋转（“+deg+”deg）”；
div.style.mozTransform=“旋转（“+deg+”deg）”；
div.style.msTransform=“旋转（“+deg+”deg）”；
div.style.oTransform=“旋转（“+deg+”deg）”；
div.style.transform=“旋转（“+deg+”deg）”；
设置超时（res，140）；
});
函数res（）{
var div=document.getElementById（“框”），
度=旋转？0:0；
div.style.webkitttransform=“旋转（“+deg+”deg）”；
div.style.mozTransform=“旋转（“+deg+”deg）”；
div.style.msTransform=“旋转（“+deg+”deg）”；
div.style.oTransform=“旋转（“+deg+”deg）”；
div.style.transform=“旋转（“+deg+”deg）”；
}
设置间隔（游戏规则，50）；
函数gamerule（）{
var div=document.getElementById（“框”）；
div.style.width=宽度+“%”；
div.style.height=高度+“%”；
如果（宽度<1）{
宽度=15；
高度=24.6；
document.getElementById（“cont”）.style.pointereEvents=“无”；
设置间隔（ser，1000）；
积分++；
函数ser（）{
document.getElementById（“cont”）.style.pointerEvents=“all”；
}
}
}
设置间隔（gamefunc，500）；
函数gamefunc（）{
如果（val>=10）{
宽度=宽度-.5；
高度=高度-.5；
var div=document.getElementById（“框”），
度=旋转？0:22；
div.style.webkitttransform=“旋转（“+deg+”deg）”；
div.style.mozTransform=“旋转（“+deg+”deg）”；
div.style.msTransform=“旋转（“+deg+”deg）”；
div.style.oTransform=“旋转（“+deg+”deg）”；
div.style.transform=“旋转（“+deg+”deg）”；
设置超时（res，140）；
};
函数res（）{
var div=document.getElementById（“框”），
度=旋转？0:0；
div.style.webkitttransform=“旋转（“+deg+”deg）”；
div.style.mozTransform=“旋转（“+deg+”deg）”；
div.style.msTransform=“旋转（“+deg+”deg）”；
div.style.oTransform=“旋转（“+deg+”deg）”；
div.style.transform=“旋转（“+deg+”deg）”；
val=9；
设置超时（游戏，1000）；
函数游戏（）{
val=10；
}
}
}

你的花括号可能有问题，但我不太清楚你想做什么。函数“gameFunc”实际上是在每次执行时创建一个名为“res”的函数，并且仅当val大于或等于10时才运行转换。当然，创建函数实际上并不执行该函数，所以这可能就是为什么间隔看起来不触发的原因

也许：

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;
}

---

仍然很严格，我希望它是一个平稳的减少和平稳的增加，不被更多的减少打断，这听起来像是一个不同的问题。也许是一个新问题？我应该回复一个问题还是你想让我在这里问你？好吧，我想说的是这个问题是关于setInterval函数的。所以，如果答案是肯定的，而你仍然不满意，你可能应该用一个更合适的标题发布一个新问题。