How to use several setTimeout one by one?

Question

I would like to animate text decryption. For ex., I have the encrypted text **** long ********* **** and I would like to slowly replace it with some long encrypted text.

I tried to use the code below, but it replaces the text immediately when I need to pause after each symbol is replaced.

function play(encText, decrText) {

    function showText() {
        var text = decrText.substring(0, i+1) + encText.substring(i+1);
        console.log(text);
        document.getElementById('text').innerHTML = text;
    }

    for( var i=0; i < encText.length+1; i++ ) {
        setTimeout( showText(), i*5000 );
    }

}

See https://jsfiddle.net/bwf0Layg/.

How could I fix that?

`showText()` isn’t a function. `showText` is a function. So accept a parameter: `function showText(i){`…`}` and pass it correctly: `setTimeout(showText, i * 5000, i);`. — Sebastian Simon, Nov 15 '21 at 21:03

score 2 · Accepted Answer · answered Nov 15 '21 at 20:49

You can create a closure for you showText on your i loop, by returning a function.

Also, I've changed you innerHTML to innerText, to stop some funky things happening, and decreased the time from 5 seconds for demo purposes.

eg.

function play(encText, decrText) {
    function showText(i) {
       return () => {
         var text = decrText.substring(0, i + 1) + 
            encText.substring(i + 1);
         document.getElementById('text').innerText = text;
       }
    }

    for (var i = 0; i < encText.length + 1; i++) {
       setTimeout(showText(i), i * 100);
    }
}

play(document.getElementById('text').innerText, 'some long encrypted text')

<div id="text">
**** long ********* ****
</div>

score 0 · Answer 2 · answered Nov 15 '21 at 20:52

The problem with your code is that the last run writes all the letters at once. What you could do is create a sleep function with a promise and setTimeout

const sleep = ()=> new Promise((resolve)=> setTimeout(resolve,5000));

async function play(encText, decrText) {
      function showText(i) {
        var text = decrText.substring(0, i + 1) + encText.substring(i + 1);
        console.log(text);
        document.getElementById('text').innerHTML = text;
      }

      for (let i = 0; i < encText.length + 1; i++) {
        await sleep();
        showText(i)
      }

    }

so on every iteration, your code "sleeps" or awaits for 5 seconds before moving to the next iteration making this slow letter appearance.

How to use several setTimeout one by one?

2 Answers2