Bonjour, je suis en train de réaliser une petite class en js pour le plaisir et je suis tombé sur un problème. Je souhaiterai pouvoir créer des setTimeout imbriqué à la volée.

le petit bout d'HTML qui va avec la class :

<p>
    <span id="zoneToWrite"></span><span id="cursor"></span>
</p>

Voici ma class :

class TypeWriter {

    constructor(zoneToWrite)
    {
        this.zoneToWrite = document.getElementById(zoneToWrite);
    }

    write(text, speed)
    {
        let i = 0;

        let interval = setInterval(() => {
            if (i < text.length)
            {
                this.zoneToWrite.textContent += text.charAt(i);
                i++;
            }
            else
            {
                clearInterval(interval);
            }

        }, speed);
    }
    delete(nbrChar, speed)
    {
        let i = 0;

        let interval = setInterval(() => {
            if (i < nbrChar)
            {
                this.zoneToWrite.textContent = this.zoneToWrite.textContent.slice(0, -1);
                i++;
            }
            else
            {
                clearInterval(interval);
            }

        }, speed);
    
    }

// Fonction à automatiser
    createListOfActions(data)
    {
        this.write(data[0].text, data[0].speed);

        setTimeout(() => {
            this.delete(data[1].nbrChar, data[1].speed);

            setTimeout(() => {
                this.write(data[2].text, data[2].speed);
            }, data[1].nbrChar * data[1].speed);
            
        }, data[0].text.length * data[0].speed);
    }

    
}

const typeWriter = new TypeWriter('zoneToWrite');
const data = [
    {type: "add", text: "Bonjour, je suis un test", speed: 150},
    {type: "sub", nbrChar: 24, speed: 100},
    {type: "add", text: "Salut, je suis un autre test", speed: 150}
];

typeWriter.test(data);

Je souhaiterai trouver un moyen de créer et imbriquer à la volée mes setTimeout dans la fonction createListOfActions lorsque je parcours ma constante data.

Dans tous mes testes, si je n'imbrique pas manuellement les setTimeout, il lance les différentes instructions en même temps. Est-ce que quelqu'un aurais une piste pour moi ?

Merci d'avance.

-
Edité par Massy Miguël 7 mars 2024 à 14:57:45

Hello,

Je dirais de partir sur du async / await pour simplifier le code visuellement.

Voici comment j'ai fait le add des caractères de mon côté :

for (let i = 0; i < this.text.length; i++) {
    el.innerHTML += this.text[i]
    await new Promise(resolve => setTimeout(resolve, this.speed))
}

PS: J'ai un exemple fonctionnel sur JSFiddle si tu as besoin d'un exemple