How to put an array value in an input?

Question

I’m having trouble inserting the values of an array into an input with JS.

What I’m looking for is, make it look like there’s a person writing and it’s not a value that’s been entered quickly and complete.

(Function() {

let campo = document.querySelector(".form-control");
let posicaoatual = 0;

setInterval(
    () => {
      posicaoatual = posicaoatual + 1;
      if  ( arraynomes[ posicaoatual ] != null ) 
      {

          campo.value = arraynomes[ posicaoatual ];
          console.log(campo.value);

      } 
      else 
      {

          console.log( 'Acabou o array, estou atoa desde:' + new Date());

      } 

    }, 5000 );

This is the array.

const arraynomes = ['Alexandre', Dank, 'Rich, 'Guilherme', 'Jessica', 'Ligia', 'marina' 'peter', 'Renata'];

Remembering that the value of the input cannot only be an inserted value but simulate a person by typing.

Any questions in the code just ask. Thank you!

Answer 1

Just in this particular case, I would suggest using a "hack" with asynchronous functions to make the code more readable.

How Javascript has a single thread, and there is no way to pause this thread temporarily (it is even undesirable), you could use a promise which takes some time to resolve, to force your code to continue running only after the resolution of the promise.

With a function like the following, you can simulate a pause within an asynchronous function:

function sleep(time) 
{
    return new Promise(res => setTimeout(res, time));
}

Thus, using the function sleep, you could have a sequential logic, like the following:

async function digitarNomes(nomes) 
{
    // Para cada nome do array
    for (var nome of nomes) 
    {
        // Para cada letra do nome
        for (var letra of nome)
        {
            // Digite a letra
            textarea.value += letra;
            // E espere 0.05 segundos
            await sleep(50);
        }
        // Adicione um espaço após cada nome
        textarea.value += ' ';
        // E espere 0.15 segundos
        await sleep(150);
    }
}

Code working:

var textarea = document.getElementsByTagName('textarea')[0];

function sleep(time) 
{
    return new Promise(res => setTimeout(res, time));
}

async function digitarNomes(nomes) 
{
    for (var nome of nomes) 
    {
        for (var letra of nome) 
        {
            textarea.value += letra;
            await sleep(50);
        }
        textarea.value += ' ';
        await sleep(150);
    }
}

digitarNomes([
    'alexandre', 
    'debora', 
    'erico', 
    'guilherme', 
    'jessica', 
    'ligia', 
    'marina', 
    'pedro', 
    'renata'
]);

<textarea rows="4" cols="50"></textarea>