javascript settimeout inside loop and repeat

Question

I have an array which contain some text descriptions. I want to display one element at a time with time delay (10 sec). After show all elements, it should be start again.

var d = 0;
var dataList = ["a","b","c"];//eg:
function ShowList()
{
    do{
       var descrip = dataList[d];
       document.getElementById('section1').innerHTML = descrip;
       d++;
       setTimeout(ShowList(),10000);

    }while(d < dataList.length);
}
ShowList();

I'll try with above code, but not working properly.

If you only want to display one element at a time, there is no need for the loop. A loop is synchronous, setTimeout is asupynchronous. — Felix Kling, Mar 10 '16 at 14:33
Also, make sure to do the wrap around at the beginning `if (d >= dataList.length) d = 0;` — 4castle, Mar 10 '16 at 14:37

score 3 · Answer 1 · edited Mar 10 '16 at 15:44

As the other answers correctly say, you need to pass the function itself to setTimeout, not call the function.

What they are not saying is that using a loop won't work here because setTimeout is asynchronous. Just set the element content and call setTimeout:

var d = 0;
var dataList = ["a","b","c"];//eg:
function showList() {
    var descrip = dataList[d];
    document.getElementById('section1').innerHTML = descrip;
    d = (d + 1) % dataList.length;
    setTimeout(showList, 10000);
}
showList();

To start from the beginning, we use the modulus operator, so that d is always in the range [0, d.length).

score 3 · Accepted Answer · edited May 23 '17 at 12:31

3

You can use setInterval() instead.

setTimeout executes the function once on a time out. setInterval executes the function repeatedly on and interval

source

Code example

var d = 0,
  dataList = ['a', 'b', 'c'];

setInterval(function() {
  var descrip = dataList[d];
  document.getElementById('section1').innerHTML = descrip;
  d++;
  if (d >= dataList.length) {
    d = 0;
  }
}, 10000);

To stop the interval, use clearInterval()

edited May 23 '17 at 12:31

Community

1
1

answered Mar 10 '16 at 14:45

R3tep

12,512
10
48
75

2

The comparison needs to be `===`, not `>`. You never want `d` to have the value `dataList.length`. – Felix Kling Mar 10 '16 at 14:46

Dmitriy · Answer 3 · 2016-03-10T14:39:09.470

1

Use setTimeout(ShowList,10000); instead of setTimeout(ShowList(),10000);

edited Mar 10 '16 at 14:39

answered Mar 10 '16 at 14:26

Dmitriy

3,745
16
24

That alone won't make the code work. In fact, you have an infinite loop. – Felix Kling Mar 10 '16 at 14:31
Make a code snippet from this ;) My browser got hanged while trying to convert your code to a live snippet. – sabithpocker Mar 10 '16 at 14:33

score 0 · Answer 4 · answered Mar 10 '16 at 14:29

0

In setTimeout you have to specify the name of the function, not the application. When you write func() you are executing the function and the result will be passed as the actual parameter of setTimeout. For example, if func() returns 2, when you write setTimeout(funct(), 1000) it is like you are writing setTimeout(2, 1000).

Therefore write setTimeout(ShowList, 10000);

answered Mar 10 '16 at 14:29

Stefano Nardo

1,567
2
13
23

I tried, when remove brackets of function it start with third element (c) and then show 'undefined' – user2870117 Mar 10 '16 at 14:40
And this is a problem of closures: [Closures on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) – Stefano Nardo Mar 10 '16 at 14:42
@StefanoNardo : no it's not. Well, not specifically in this case. The logic of the function is simply incorrect. – Felix Kling Mar 10 '16 at 14:44

javascript settimeout inside loop and repeat

4 Answers4