title: Show elements of array one by one - Jquery
body: <p>So I have a button on which I want to display each element of my array for a few seconds. This is my html code:</p>
  
  <pre><code>&lt;button class="btn" id="random"&gt;Start&lt;/button&gt;
  </code></pre>
  
  <p>I have made an array with jQuery that I want to use to change the buttons text:</p>
  
  <pre><code>$(document).ready(function() {
      $("#random").on("click", loop);
  });
  
  var array = ["el1","el2","el3"];
  
  function loop() {
      for (i = 0; i &lt; array.length; i++) {
          $("#random").html(array[i]);
      }
      var random = Math.floor(Math.random() * array.length) + 1;
      $("#random").html(array[random]);
  }
  </code></pre>
  
  <p>The <code>for</code> loop is supposed to do what I want but I can't find a way to delay the speed, it always just shows the last line of code. When I try <code>setTimeout</code> or something it just looks like it skips the <code>for</code> loop.</p>