Start script after a preset time

Asked

Viewed 51 times

0

I have a little problem here, I hope someone can help me.

I have two elements: h1 and h2, I made a script for typing effect for both, only I want the typing effect of h2 is started only when the h1 is finished, or after a while I select. I tried to do it this way but it didn’t work:

<script>
                            function typeWrite (elemento) {
                            const textoArray = elemento.innerHTML.split('');
                            elemento.innerHTML = '';
                            textoArray.forEach((letra, i) => {
                             setTimeout(function() {
                                 elemento.innerHTML += letra
                             }, 75 * i)

                            });

                            }
                     const titulo = document.querySelector('h1')
                     typeWrite(titulo);
                     </script>

                     <script>

                        var segundos = 4;

                        setTimeout ( function typeWrite (elemento) {
                        const textoArray = elemento.innerHTML.split('');
                        elemento.innerHTML = '';
                        textoArray.forEach((letra, i) => {
                         setTimeout(function() {
                             elemento.innerHTML += letra
                         }, 75 * i)

                        });

                        }, segundos * 1000);

                 const titulo2 = document.querySelector('h2')
                 typeWrite(titulo2);
                 </script>

Can someone tell me what the mistake is? Thank you!

javascript html jquery css

  • I have already posted a suggestion but here is an answer to your question: the mistake is that in setTimeout of the 4 seconds you are redeclaring the function typeWrite and not calling her. The right thing would be something like setTimeout(()=>{&#xA; const titulo2 = document.querySelector('h2')&#xA; typeWrite(titulo2);&#xA; }, segundos * 1000);

2 answers

0


Just send the h2 for the function typeWrite after the time you set in the variable segundos:

function typeWrite (elemento) {
   const textoArray = elemento.innerHTML.split('');
   elemento.innerHTML = '';
   textoArray.forEach((letra, i) => {
      setTimeout(function() {
         elemento.innerHTML += letra
      }, 75 * i)
      
   });
}

const titulo = document.querySelector('h1')
typeWrite(titulo);

var segundos = 4;

setTimeout ( function(){
   const titulo2 = document.querySelector('h2')
   typeWrite(titulo2);
}, segundos * 1000);
<h1>texto 1</h1>
<h2>texto 2</h2>

0

You can send the second as callback, so that one waits for the other

I changed the structure to use await de Promisses instead of timeout, so I think it is easier to control.

<h1>Aqui alguma coisa</h1>
<h2>Aqui outra coisa</h2>
<h3>Esse começa depois de 4 segundos</h3>

<script>
    async function typeWrite(elemento, callback = null) {
        const textoArray = elemento.innerHTML.split('');
        elemento.innerHTML = '';
        var i = -1;
        while(textoArray[++i]) {
            await new Promise((res, rej) => {
                setTimeout(() => {
                    res(elemento.innerHTML += textoArray[i]);
                }, 75);
            });
        };
        if (callback) {
            callback();
        }
    }
    const titulo1 = document.querySelector('h1');
    const titulo2 = document.querySelector('h2');
    const titulo3 = document.querySelector('h3');
    typeWrite(titulo1, () => typeWrite(titulo2));
</script>

If you want to start some after a certain time, then use setTimeout

const segundos = 5;
setTimeout(()=>typeWrite(titulo3), segundos * 1000);

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.