Setinterval似乎在1500毫秒而不是50毫秒上运行

Question

我有一个设置的间隔函数，尽管将其设置为50ms，但它似乎以1500ms运行。 如果您看一下此脚本，它会缩小一个元素并使其摇晃几度，我希望它能够平稳运行，因为它确实在大约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;
  }
  }
}

Answer 1

您的大括号可能有问题，但是我不太清楚您要做什么。 实际上，函数“ 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;
}