How to loop through an array and display each value next to eachother with a 500ms interval using pureJS?

Question

The loop below basically loops through my array which is sumFormat then displays each value of the array with a 500ms interval, which is fine, but its displaying the array values only once at time so

for example if the array contains [1, 2, 3]

• it displays 1 then 500ms later displays 2 in place of the 1 ,
• but I want it to display 1 then 500ms later display 2 next to
• the 1 so 1 2
• and then 1 2 3 and so on,

I've tried to figure it out but can't seem to get it right.

for (var i = 0; i < sumFormat.length; i++) {
    (function(i) {
        setTimeout(function() {
            factOut.innerHTML = sumFormat[i];
        }, 500 * i);
    })(i);
}

Answer 1

Concatenate with the existing innerHTML instead of just assigning to it, since that will overwrite whatever was there previously. You can also use let instead of var to make the code much neater. Also, since you're only inserting text , not HTML markup, better to use textContent instead:

 const sumFormat = [1, 2, 3, 4, 5]; for (let i = 0; i < sumFormat.length; i++) { setTimeout(function() { factOut.textContent += ' ' + sumFormat[i]; }, 500 * i); }

 <div id="factOut"></div>

Another method, by joining the array items from 0 to the current index:

 const sumFormat = [1, 2, 3, 4, 5]; for (let i = 0; i < sumFormat.length; i++) { setTimeout(function() { factOut.textContent = sumFormat.slice(0, i + 1).join(' '); }, 500 * i); }

 <div id="factOut"></div>

Answer 2

There are a couple of things I would change here.

Using multiple setTimeout's and setting the timeout's as increasing values could cause you issues if you wanted lots of them, timeout's are a limited resource in JS.

One option is possibly using setInterval as someone here as shown, but my favourite is using async / await.

Also if your list got very long, constantly changing the innerHTML would not be very kind to the DOM, instead creating another DOM element and adding those would be more efficient. Another advantage of them been separate is it make's it much simpler to style them too.

Below is an example using async/await and adding to the DOM, instead of constantly updating the innerHTML, and for fun just putting a bit of style to it.

 const delay=ms=>new Promise(r=>setTimeout(r,ms)); (async function() { const sumFormat = [1,2,3,4]; for (const i of sumFormat) { const num = document.createElement('span'); num.innerText = i; factOut.appendChild(num); await delay(500); } }());

 span { padding: 0.2rem 0.4rem; margin: 0.2rem 0.3em; background-color: lightblue; border: 1px solid black; border-radius: 0.5rem; }

 <div id="factOut"></div>

Answer 3

Here Example with setInterval()

 function SetValue(text, at){ factOut.innerHTML += text[at] + (text.length-1 == at ?"":" "); } var sumFormat = [1,2,3,4,5]; var i = 0; var myinterval = setInterval(function(){ if(i == sumFormat.length){ clearInterval(myinterval); return; } SetValue(sumFormat,i); i++; },500)

 <div id="factOut" />