Setinterval, кажется, работает на 1500 мс вместо 50 мс - PullRequest
0 голосов
/ 20 мая 2018

У меня установлена ​​функция интервала, которая, кажется, работает на 1500 мс, хотя она установлена ​​на 50 мс.Если вы посмотрите на этот скрипт, он сжимает элемент и встряхивает его на несколько градусов, я хочу, чтобы он работал гладко, хотя он действительно работает примерно на ~ 1500 мс.Любая помощь?Изменение формы 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;
  }
  }
}

1 Ответ

0 голосов
/ 20 мая 2018

У вас могут быть проблемы с фигурными скобками, но я не могу точно сказать, что вы пытаетесь сделать.Функция "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;
}
...