如何在纯javascript中将类添加到随机元素

Question

I have a ul with some li 's inside. I want to randomly select an li and add an .active class for 1second, then remove .active class and randomly select a next li .

I am trying to do this without the use of setInterval or Timeout, so I have tried using requestAnimationFrame although I think my logic with javascript is not quite right on randomizing.

Currently I have it working but it selects the same li each time the function is called again.

<ul>
  <li class="light active"></li>
  <li class="light"></li>
  <li class="light"></li>
  <li class="light"></li>
  <li class="light"></li>
</ul>

Javascript

(function() {

var lights = document.getElementsByClassName("light");
var random = Math.floor(Math.random() * (lights.length - 1)) + 0;
var randomLight = lights[random];

function repeatOften() {
  randomLight.classList += randomLight.classList ? ' active' : ' light';
  requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);

})();

Here is a pen: https://codepen.io/H0BB5/pen/PJjapX?editors=0010

Thanks in advance!

Answer 1

The right choice to run a function in a more-or-less known time in the future is setTimeout . requestAnimationFrame is meant for something that should run as often as is feasible without interrupting the render loop, say 60 times a second (aka "at 60 fps").

In your case you have a relatively slow update rate of once a second, so setTimeout isn't hurting.

You probably want to keep track of two elements: The one you're changing and the one you previously changed, so you can reset it.

Also, classList.toggle comes in handy as it adds or removes a class, based on if it's already present or not.

(function() {
  var lights = document.getElementsByClassName("light");
  var previousLight = null;

  function repeatOften() {
    if (previousLight) previousLight.classList.toggle('active')

    var random = Math.floor(Math.random() * (lights.length - 1)) + 0;
    var randomLight = lights[random];
    randomLight.classList.toggle(randomLight);
    previousLight = randomLight;
    setTimeout(repeatOften, 1000);
  }

  setTimeout(repeatOften, 1000);
})();

Here is the updated (and slightly changed) pen.

Answer 2

You need to update which light to blink every time the function runs. To make a different light change every second, check if the animation frame time has been a second.

 (function repeatOften(ts) { if (ts % 1000 < 10) { document.getElementsByClassName("active")[0].classList.remove('active'); var lights = document.getElementsByClassName("light"); lights[Math.floor(Math.random() * lights.length)].classList.add('active'); } requestAnimationFrame(repeatOften); })(); 

 li { background: 1px black } li.active { animation: blink 1s ease-in-out infinite; } @keyframes blink { 50% { opacity: 0; } } 

 <ul> <li class="light active"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> </ul> 

Answer 3

I am trying to do this without the use of setInterval or Timeout

You can use animationend event to call same function when current CSS animation completes

 function fn() { var lights = document.querySelectorAll(".light"); var random = Math.floor(Math.random() * lights.length); var randomLight = lights[random]; repeatOften(randomLight) }; function repeatOften(randomLight) { randomLight.className = "light active"; randomLight.addEventListener("animationend", blink) } function blink() { this.className = "light"; this.removeEventListener("animationend", blink); fn(); } // handle first `li` document.querySelector(".light.active") .addEventListener("animationend", blink) 

 .light.active { animation: blink 1s ease-in-out; } @keyframes blink { 50% { opacity: 0; } } 

 <ul> <li class="light active"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> <li class="light"></li> </ul>