Блог

Итак, что я пытаюсь сделать, я меняю фон div, используя js. Код:

 let counter = 0;
setInterval(() => {
  counter   ;
  if(counter == 3) counter = 0;
  switch (counter) {
    case 0 : {
      background1.style.zIndex = "-1";
      background2.style.zIndex = "-2";
      background3.style.zIndex = "-2";

      background1.style.opacity = "1";
      background2.style.opacity = "0";
      background3.style.opacity = "0";
      break;
    }

    case 1 : {
      background2.style.zIndex = "-1";
      background1.style.zIndex = "-2";
      background3.style.zIndex = "-2";

      background2.style.opacity = "1";
      background3.style.opacity = "0";
      background1.style.opacity = "0";
      break;
    }

    case 2 : {
      background3.style.zIndex = "-1";
      background1.style.zIndex = "-2";
      background2.style.zIndex = "-2";

      background3.style.opacity = "1";
      background1.style.opacity = "0";
      background2.style.opacity = "0";
      break;
    }
  }
}, 25000);
 

Основной вывод из этого заключается в том, что я запускаю функцию в js каждые 25 секунд.

Теперь предположим, что 25 секунд вот-вот закончатся. И я нажимаю на «кнопку», которая Idk, запускает некоторую анимацию и прочее, затем ofc, поскольку js является однопоточным, ставит задачи в очередь, и это выглядит немного отстающим, как будто «кнопка» не работает.

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

Функция JavaScript setInterval является асинхронной, поэтому она не блокирует основной поток, когда он находится в состоянии «ожидания». Вы нажимаете кнопку, чтобы выполнить какую-то анимацию, или что-то еще может вызвать задержку, о которой вы говорили выше, я думаю, вы можете использовать анимацию подавления с помощью requestAnimationFrame, поскольку она может достигать 60 кадров в секунду, если процессор не очень занят. Вот пример кода, который sinippet может помочь:

 function update() {
  let elapsedTime = Date.now() - startedAt

  // playback is a value between 0 and 1
  // being 0 the start of the animation and 1 its end
  let playback = elapsedTime / duration

  updateTarget(playback)
  
  if (playback > 0 amp;amp; playback < 1) {
    // Queue the next frame
    requestAnimationFrame(update)
  } else {
    // Wait for a while and restart the animation
    setTimeout(start, duration/10)
  }
}
 

Я думаю, вы получите лучшую производительность, если будете делать это вообще не через Javascript, а чисто в CSS, используя анимацию. Таким образом, система может использовать аппаратное обеспечение (GPU) там, где это возможно, и вы не загромождаете свой JS.

Вот простой пример, очевидно, вы хотите добавить свои собственные изображения, и если фон предназначен для какого-либо элемента, отличного от тела, измените CSS на это.

 body {
  width: 100vw;
  height: 100vh;
  animation-name: change;
  animation-duration: 75s;
  animation-iteration-count: infinite;
}

@keyframes change {
  0% {
    background: red;
  }
  0.01% {
    background: green;
    }
  33% {
    background: green;
    }
  33.01% {
    background: blue;
    }
  66% {
    background: blue;
    }
  66.01% {
    background: red;
    }
  99.99% {
    background: red;
    }
}