SetTimeout and For loop

Question

My problem: Want to display every letter after 1 second, but instead of this I display all the letters immediately. I have tried many ways to do this but still can't.

My code:

const [parrot, setParrot] = useState({ content: ' ' });

const displayText = () => {
    let text = 'Parrot';
    let freeLetters = [...text];
    let sumOfLetters = [];

    for (let k = 0; k < freeLetters.length; k++) {
        (function() {
            let j = k;
            setTimeout(() => {
                sumOfLetters.push(freeLetters[j]);
                console.log(sumOfLetters);
                setParrot({
                    content: sumOfLetters.join(' ')
                });
                console.log(parrot.content);
            }, 1000);
        })();
    }
};
   return (
    <div className={classes.contentwrapper}>
        <h1 onClick={() => displayText()}>Click me, {parrot.content}</h1>
    </div>
);

There's no need for a loop at all. Having it is what is causing your problem because the loop runs quickly. The timer being called recursively creates a looping mechanism. — Scott Marcus, Jan 03 '20 at 19:23
Does this answer your question? [setTimeout in for-loop does not print consecutive values](https://stackoverflow.com/questions/5226285/settimeout-in-for-loop-does-not-print-consecutive-values) — Heretic Monkey, Jan 03 '20 at 19:30

Lee Brindley · Accepted Answer · 2020-01-03T19:26:29.027

Your timeouts are all set to 1000 milliseconds, you should multiply the timeout by the current index of the loop.

What you need to do is increase the setTimeout wait value on each iteration of your loop. See a working example below.

const [parrot, setParrot] = useState({ content: ' ' });

const displayText = () => {
    let text = 'Parrot';
    let freeLetters = [...text];
    let sumOfLetters = [];

    for (let k = 0; k < freeLetters.length; k++) {
        (function() {
            let j = k;
            setTimeout(() => {
                sumOfLetters.push(freeLetters[j]);
                console.log(sumOfLetters);
                setParrot({
                    content: sumOfLetters.join(' ')
                });
                console.log(parrot.content);
            }, 1000 * (j + 1));
            // j + 1 because the loop starts at 0. 
            // For the second iteration this will be 2000 ms
            // For the third, 3000 ms
            // Etc.
        })();
    }
};
   return (
    <div className={classes.contentwrapper}>
        <h1 onClick={() => displayText()}>Click me, {parrot.content}</h1>
    </div>
);

Couldn't we just use `setInterval` instead of `setTimeout`? – admcfajn Jan 03 '20 at 19:30 — admcfajn, Jan 03 '20 at 19:30
You could rewrite this code to use setInterval for sure. – Lee Brindley Jan 03 '20 at 19:31 — Lee Brindley, Jan 03 '20 at 19:31

score 0 · Answer 2 · answered Jan 03 '20 at 20:24

You're loop is just firing off an function that says in 1000ms do something. The loop will just continue to iterate and until the condition meets and then in your 1000ms, all of the setTimeouts will trigger almost back to back. You could either use the setInterval or maybe rewrite this to use a recursion loop based on some condition.

SetTimeout and For loop

2 Answers2