Замедлить цикл или создать анимацию?

Question

Я создаю игровой автомат, и мне нужно замедлить петли или создать какую-то анимацию, чтобы я мог видеть изображения, движущиеся на экране.

Я сделал несколько тестов и похоже, что все работает, я также включил ненужные изменения изображения во время процесса, но ничто не замедляет его, я могу видеть только текущее и последнее изображение, несмотря на то, что цикл был запущенболее тысячи раз.

function myFunction() {
  var i, dicepic;
  var itotal = ktotal = ltotal = jtotal = totalgeral = 0;
  var dice = Math.floor(Math.random() * 1000) + 1;

  for (i = 0; i < dice; i++) {
    itotal++;
    totalgeral++;

    var k;
    for (k = 1; k < 7; k++) {
      ktotal++;
      totalgeral++;
      document.getElementById("first-picture" + k).src = 'images/empire.jpg';
    }

    var l;
    for (l = 1; l < 7; l++) {
      ltotal++;
      totalgeral++;
      document.getElementById("first-picture" + l).src = 'images/black.jpg';
    }

    var j;
    for (j = 1; j < 7; j++) {
      jtotal++;
      totalgeral++;
      var dicepic = Math.floor(Math.random() * 11) + 1;
      document.getElementById("first-picture" + j).src = 'images/image' + dicepic + '.jpg';
      document.getElementById("vari1").innerHTML = "Value of i is: " + i;
      document.getElementById("vari2").innerHTML = "Value of Dice is: " + dice;
      document.getElementById("pic-code-" + j).innerHTML = "Code is: " + dicepic;
    }
  }

  document.getElementById("vari3").innerHTML = "Value of Dice is: " + dice;
  document.getElementById("loop-i").innerHTML = "Loop I: " + itotal;
  document.getElementById("loop-k").innerHTML = "Loop K: " + ktotal;
  document.getElementById("loop-l").innerHTML = "Loop L: " + ltotal;
  document.getElementById("loop-j").innerHTML = "Loop J: " + jtotal;
  document.getElementById("loops-total").innerHTML = "Total: " + totalgeral;
}

Мне бы хотелось, чтобы картинки менялись с ощущением, что они вращаются, но только первый и последний снимок показывают.

Любая идея будет оченьоценили.Я учусь, поэтому мой код выглядит очень просто, и я до сих пор не знаю, как использовать множество функций.

Answer 1

Не уверен, какой цикл замедлить, но вы можете попробовать setTimeout попробовать что-то вроде этого:

function myFunction() {

  var i, dicepic, duration = 0, interval = 1000;

  var itotal = ktotal = ltotal = jtotal = totalgeral = 0;

  var dice = Math.floor(Math.random() * 1000) + 1;

  for (i = 0; i < dice; i++) {

    itotal ++;
    totalgeral ++;

    var k;
      for (k = 1; k < 7; k++) {
        ktotal ++;
        totalgeral ++;
        setTimeout((function(){ this.src = 
'images/empire.jpg';}).bind(document.getElementById("first-picture" + k)), duration);
duration += interval;
      }

      var l;
      for (l = 1; l < 7; l++) {
        ltotal ++;
        totalgeral ++;
setTimeout((function(){ this.src = 
'images/black.jpg';}).bind(document.getElementById("first-picture" + l)), duration);
duration += interval;
      }

    var j;
    for (j = 1; j < 7; j++) {
      jtotal ++;
      totalgeral ++;
      var dicepic = Math.floor(Math.random() * 11) + 1;

setTimeout((function(){ 
this.el.src = this.pic;
document.getElementById("vari1").innerHTML = "Value of i is: " + this.i;
      document.getElementById("vari2").innerHTML = "Value of Dice is: " + 
this.dice;
      document.getElementById("pic-code-" + j).innerHTML = "Code is: " + 
this.dicepic;

}).bind({el:document.getElementById("first-picture" + j), pic: 'images/image' + 
dicepic + '.jpg', i: i, dice: dice, dicepic: dicepic}), duration);
duration += interval;

    }

  }
  document.getElementById("vari3").innerHTML = "Value of Dice is: " + 
dice;

  document.getElementById("loop-i").innerHTML = "Loop I: " + itotal;
  document.getElementById("loop-k").innerHTML = "Loop K: " + ktotal;
  document.getElementById("loop-l").innerHTML = "Loop L: " + ltotal;
  document.getElementById("loop-j").innerHTML = "Loop J: " + jtotal;
  document.getElementById("loops-total").innerHTML = "Total: " + 
totalgeral;
}

Answer 2

Вы можете использовать код belwo для аниматирования или вызова функции с помощью FPS.

function AnimationLoop(fn, fps) {
    let now;
    let delta;
    let interval;
    let then = new Date().getTime();

    let frames;
    let oldtime = 0;

    return (function loop(time) {
        requestAnimationFrame(loop);

        interval = 1000 / (fps || 60);
        now = new Date().getTime();
        delta = now - then;
        if (delta > interval) {
            then = now - (delta % interval);
            frames = 1000 / (time - oldtime)
            oldtime = time;
            fn(frames);
        }
    }(0));
};

let counter = 10;
function countdown() {
    counter--;
    console.log(counter);
}

AnimationLoop(function(fps){
    countdown();
}, 1); // 1 is FPS, 1 Frame per Second, If you do it, 5 it will call your function 5 times in a second.

Answer 3

Вместо зацикливания, которое не гарантирует, что управление возвращается подпроцессу рендеринга при каждом обновлении, попробуйте использовать итеративные вызовы функций:

const YOUR_DELAY = 10;
function doTheThing(i) {
  if (i === 0) return;
  // step
  setTimeout(() => doTheThing(i - 1), YOUR_DELAY);
}

doTheThing(5);