Javascript show several div'’s in different time intervals

Question

my question is about how to make various elements appear with different classes and times. The idea is to do as the Facebook Live interaction. The Code is as follows::

<ul class="reactions">
   <li class="size1">:)</li>
   <li class="size2">:o</li>
   <li class="size3">:(</li>
   <li class="size1">:/</li>
   <li class="size2">:-</li>
   <li class="size3">:*</li>
</ul>

By logic, Javascript (or Jquery) would have to print these 6 elements randomly drawing size and "li", I have no idea how to do this. I already have them in html, it will not be necessary to pull the bank. Can help me?

Answer 1

I don’t know if it’s the best way to do it, but it worked:

$(document).ready(function() {
  var ul = $("ul").find("li");
  var rand = function() {
    var randNumber = Math.floor((Math.random() * ul.length) + 0);
    ul.each(function() {
      $(this).hide()
    });
    $(ul[randNumber]).show();
    setTimeout(rand, randNumber * 300);
  }
  rand();


})

<script src='https://code.jquery.com/jquery-3.2.0.min.js'></script>
<ul class="reactions">
  <li hidden class="size1">:)</li>
  <li hidden class="size2">:o</li>
  <li hidden class="size3">:(</li>
  <li hidden class="size1">:/</li>
  <li hidden class="size2">:-</li>
  <li hidden class="size3">:*</li>
</ul>

I created a loop with SetTimeout() with random time, and an array with all li that is varying, taking advantage of the same random number and playing in the index of the array. This number goes from 0 to the length of the array, and within the loop time it is multiplied by 300, but you can create another random number to specify the maximum time as desired.

Example in jsfiddle