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.

gaetanoM · Accepted Answer · 2016-05-12 18:46:24Z

1

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>

edited May 12, 2016 at 18:46

answered May 12, 2016 at 18:40

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nathalie Over a year ago

i was looking for something with a loop in it so thank you very much :D

pawel-kuznik · Accepted Answer · 2016-05-12 18:32:29Z

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();
  });
});

Pranav C Balan · Accepted Answer · 2016-05-13 03:01:58Z

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>

edited May 13, 2016 at 3:01

answered May 12, 2016 at 18:21

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

2 Comments

nathalie Over a year ago

Thank you! Worked perfectly

Pranav C Balan Over a year ago

@4eyes : glad to help :)

Collectives™ on Stack Overflow

Show elements of array one by one - Jquery

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related