Display array elements with delay

Question

I have an arrays=[John; Alex; Mark], I wanna to show the elements of this array one by one by 3 second delay.

for (var i=0; i<=3; i++)
  {
     setTimeout(function(){x.innerHTML=s[i]},3000)
  }

It seems very simple problem, but I can't figure out.

Did you look at the console in the browser for error messages? — epascarello, Apr 03 '13 at 13:22
possible duplicate of [Javascript SetTimeout and Loops](http://stackoverflow.com/questions/14791158/javascript-settimeout-and-loops) — Denys Séguret, Apr 03 '13 at 13:37
Note that I voted as duplicate for the 2 main errors but Alnitak found other problems (which should have been found by OP with a little care). This question shouldn't be deleted thus in my opinion. — Denys Séguret, Apr 03 '13 at 13:38
do you want to repeat the display/stop after displaying it once — Arun P Johny, Apr 03 '13 at 13:48
I am new in the js, and I typed in the another pc, so the files that I work wasn't with me, just typed hoping, somebody can understand. Thanks to all :) — user2240469, Apr 03 '13 at 16:07

Alnitak · Accepted Answer · 2013-04-03T13:36:11.133

your loop runs four times, not three
setTimeout starts with a lower case s
your delay should be 3000 for 3 seconds, not 2000
your delay should be 3000 * i, not 3000 or they'll all fire at once
you can't use loop variables inside an asynchronous callback without special precautions - the callbacks will all see the last value assigned to i, not the values it had as you went through the loop.

This works, and completely avoids the loop variable issue:

var s = ['John', 'Mark', 'Alex'];
var i = 0;

(function loop() {
    x.innerHTML = s[i];
    if (++i < s.length) {
        setTimeout(loop, 3000);  // call myself in 3 seconds time if required
    }
})();      // above function expression is called immediately to start it off

Note how it uses "pseudo-recursion" to trigger the next iteration 3000ms after the completion of the previous iteration. This is preferable to having n outstanding timers all waiting at the same time.

See http://jsfiddle.net/alnitak/mHQVz/

score 1 · Answer 2 · edited May 23 '17 at 10:31

http://jsfiddle.net/rlemon/mHQVz/1/

I got to tinkering... albeit this is probably not the best solution it was fun.

var x = document.getElementById('x'),
    s = ['John', 'Mark', 'Alex'];

(function loop() {
    s.length && (x.innerHTML = s.shift(), setTimeout(loop, 3000));
})();

Alnitak's solution is alot better. However they both would work (his is just more readable and less hacky also does not destroy the array).

score 1 · Answer 3 · answered Feb 25 '19 at 17:12

this will also help:

const fruits = ['apple', 'banana', 'mango', 'guava'];
let index = 0;
const primtMe = (value, i) => {
    if (i < fruits.length) {
        setTimeout(() => {
            console.log(i + ' value = ' + value)
            primtMe(fruits[i + 1], i + 1)
        }, 3000);
    } else {
        return;
    }
}

primtMe(fruits[index], index)

VisioN · Answer 4 · 2013-04-03T13:33:46.240

Your code won't work, since you set four timeouts of 2000 milliseconds (i.e. 2 seconds) at a time. You'd better use closure that sets three timeouts (by number of elements in array) with 3000 milliseconds of delay. It can be done with the following code (note that setTimeout is written from the small letter):

var s = ["John", "Alex", "Mark"];
for (var i = 0; i < s.length; i++) {
    (function(i) {
        setTimeout(function() {
            x.innerHTML = s[i];
        }, 3000 * i);
    })(i);
}

DEMO: http://jsfiddle.net/6Ne6z/

score 0 · Answer 5 · answered Apr 03 '13 at 13:25

0

Try

var s=['John', 'Alex', 'Mark'];
var x = document.getElementById('x');

function display(i){
    if(i >= s.length){
        i = 0;
    }

    x.innerHTML = s[i];
    setTimeout(function(){
       display(i + 1)
    }, 2000)
}

display(0)

Demo: Fiddle

answered Apr 03 '13 at 13:25

Arun P Johny

384,651
66
527
531

why are you restarting the loop over when it reaches the end of the list? – Alnitak Apr 03 '13 at 13:36

score 0 · Answer 6 · answered Apr 03 '13 at 13:27

If you do not use closure, you will end up with i being undefined. This is because in each iteration you are overriding what i is. By the time it finishes, it will be undefined. Using a closure will preserve i.

On another note, it's kind of pointless to hard code in values (i.e. i<3) when you can just check for length. This way, if s ever changes, you for loop will still grab everything.

var s = ['john','mark','brian'];
for (var i = 0; i < s.length; i++) {
    (function(i) {
        setTimeout(function() {
            x.innerHTML = s[i];
        }, 3000*(i+1));
    })(i);
}

score 0 · Answer 7 · answered Feb 09 '18 at 20:29

You can use setInterval to show elements one by one after 3 seconds delay:

s=["John", "Alex", "Mark"];

var i = 0;
var id = setInterval(function(){                
            if(i > s.length) {                  
                clearInterval(id);                  
            }
            else{
                console.log(s[i++]);
            }
}, 3000);

noyo1000gt · Answer 8 · 2018-08-23T16:46:05.110

Try this without pseudo-recursion

var arr = [10,20,30,40]; // your array
var i = 0;
var interval = 2000 // 2 sec, you can add your time required
function callInterval() {
// set a variable for setInterval
 var time = setInterval(()=>{
  console.log('['+arr[i]+','+i+']');
  i++; 
  if(i==arr.length){
   this.clearInterval(time);// clear the interval after the index
  }
  }, interval);
}

callInterval();

score 0 · Answer 9 · answered Aug 10 '22 at 08:55

I solved this problem by using setInterval. Here is my solution:

function delayPrint(arr, delay) {
    let index = -1;

    const interval = setInterval(function () {
        if (++index === arr.length) {
            clearInterval(interval);
            return;
        }

        console.log(arr[index]);
    }, delay);
}

let s = ['John', 'Alex', 'Mark'];

delayPrint(s, 3000);

// output:
// John after 3s
// Alex after 3s
// Mark after 3s

Display array elements with delay

9 Answers9

Linked