Show elements of array one by one - Jquery

Question

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:

<button class="btn" id="random">Start</button>

I have made an array with jQuery that I want to use to change the buttons text:

$(document).ready(function() {
    $("#random").on("click", loop);
});

var array = ["el1","el2","el3"];

function loop() {
    for (i = 0; i < array.length; i++) {
        $("#random").html(array[i]);
    }
    var random = Math.floor(Math.random() * array.length) + 1;
    $("#random").html(array[random]);
}

The for 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 setTimeout or something it just looks like it skips the for loop.

Answer 1

Use setInterval() and clearInterval()

 $(document).ready( function() { $("#random").on("click", loop); } ); var array = ["el1", "el2", "el3"]; var int; function loop() { var i = 0; // variable for array index int && clearInterval(int); // clear any previous interval int = setInterval(function() { //store interval reference for clearing if (i == array.length) clearInterval(int); // clear interval if reached the last index $("#random").text(i == array.length ? 'Start' : array[i++]); // update text with array element atlast set back to button text }, 1000); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button class="btn" id="random">Start</button>

---

UPDATE : If you need to implement it using for loop and setTimeout() then do something like this

 var array = ["el1", "el2", "el3", "Start"]; function loop() { for (i = 0; i < array.length; i++) { (function(i) { setTimeout(function() { $("#random").html(array[i]); }, i * 1000); })(i); } } $(function() { $("#random").on("click", loop); });

 <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <button class="btn" id="random">Start</button>

Answer 2

Basically, a for loop will not help you. It runs with the max speed it can. And delaying it would do no good in js (you would just freeze the browser). Instead, you can just make a function that will execute itself with a delay. Kinda recursion, but not entirely. Below would make the trick.

https://jsfiddle.net/7dryshay/

$(document).ready(function() {
    $("#random").on("click", function (event) {
    // texts to cycle
    var arr = ["el1","el2","el3"];

    // get the button elem (we need it in this scope)
    var $el = $(event.target);

    // iteation function (kinda recursive)
    var iter = function () {

      // no more stuff to display
      if (arr.length === 0) return;

      // get top of the array and set it on button
      $el.text(arr.shift());

      // proceed to next iteration
      setTimeout(iter, 500);
    }

    // start first iteration
    iter();
  });
});

Answer 3

My proposal is to use IIFE and delay :

 var array = ["el1","el2","el3", "Start"]; function loop(){ for (i = 0; i < array.length; i++){ (function(i) { $("#random").delay(1000).queue(function () { $(this).html(array[i]); $(this).dequeue(); }); })(i); } } $(function () { $("#random").on("click", loop); });

 <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <button class="btn" id="random">Start</button>