How to display a value from a array index in interval

Question

Fiddle: https://jsfiddle.net/uafaLstf/1/

I have the following:

$(".span1").html("Warm Welcome To: " + "<br />");
arr = [];

arr.push(["john", "jdoe", "very nice"]);
arr.push(["mike", "mdone", "job well"]);
arr.push(["haan", "hgore", "creative"]);

var interval = 1000;
for (var f = 0; f < arr.length; f++) {
    SendWishes(arr[f][0]);
}

function SendWishes(name) {
    setTimeout(function () { $(".span1").html($(".span1").html() + name + "<br />"); }, 1000);
}

<span class="span1"></span>

What I am trying to do is display the name after every 1 second... however in my code the entire list is displayed without delay for each entry.

I think I am pretty close and missing something. Can someone please help with my code...

void · Accepted Answer · 2018-03-19T20:37:16.123

1

What you can do is pass the value of f in the function and then use it to calculate the delay of setTimeout

$(".span1").html("Warm Welcome To: " + "<br />");
arr = [];

arr.push(["john", "jdoe", "very nice"]);
arr.push(["mike", "mdone", "job well"]);
arr.push(["haan", "hgore", "creative"]);

var interval = 1000;
for (var f = 0; f < arr.length; f++) {
  SendWishes(arr[f][0], f);
}

function SendWishes(name, f) {
  setTimeout(function() {
    $(".span1").html($(".span1").html() + name + "<br />");
    if (f === arr.length - 1)
      console.log("Loop is over");
  }, 1000 * f);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="span1"></span>

edited Mar 19 '18 at 20:37

answered Mar 19 '18 at 20:12

void

36,090
8
62
107

Perfect... I had a feeling i was close. Thank you. – Si8 Mar 19 '18 at 20:13
@11 minutes. :) – Si8 Mar 19 '18 at 20:13
Why the downvotes here? Care to explain? – void Mar 19 '18 at 20:15
I +1 your answer I am not sure who downvoted. – Si8 Mar 19 '18 at 20:20
@void Not sure, but I guess since it has a for-loop that it doesn't really need. – nicael Mar 19 '18 at 20:20
@nicael yea I saw your answer, I guess the for loop implementation is easier to read, also without an hardcoded 3. I dont see any reason not to use for loop here.. – void Mar 19 '18 at 20:24
@void btw, not necessary to hard-core 3 either, one can just check `if(f – nicael Mar 19 '18 at 20:25
@void A side question, is there any way to see when the array loop is complete, I would like to show an alert that it's done. Thanks – Si8 Mar 19 '18 at 20:32
@Si8 yes you can use `if (f === arr.length - 1)` condition. See the updated answer. – void Mar 19 '18 at 20:34
It displays the alert before the last entry is displayed... thanks – Si8 Mar 19 '18 at 20:36
@Si8 that is because alert stops the execution of all the other statements. Instead try console.log() see the updated answer. – void Mar 19 '18 at 20:37
Yes i saw that. Thank you – Si8 Mar 19 '18 at 20:37

nicael · Answer 2 · 2018-03-19T20:24:28.870

You don't even need a for-loop at all. Just fire the setTimeout three times (or fire setInterval and reset it after 3 times).

Side notes:

1) optimisation: no need to call arr.push three times, you could do that in one call

2) you can use $(".span1").append() to shorten the code.

$(".span1").html("Warm Welcome To: " + "<br />");
arr = [];

arr.push(["john", "jdoe", "very nice"],
         ["mike", "mdone", "job well"],
         ["haan", "hgore", "creative"]);

var f = 0;

SendWishes();

function SendWishes() {
    setTimeout(function () {
        $(".span1").append(arr[f++][0] + "<br />"); 
        if(f < 3) SendWishes();
        //OR: if(f < arr.length) in case you plan to push something else to your array
  }, 1000);
}

Thank you @niacael... just realized that. – Si8 Mar 19 '18 at 20:24 — Si8, Mar 19 '18 at 20:24

How to display a value from a array index in interval

2 Answers2