How to set time gap between each iteration of foreach() in js

Question

I am trying to get a typing effect for multiple lines. I want that my next for each iteration should run after the previous one has been executed. Is there a way to do that

HTML-

<body>
    <div class="intro">
        <p class="intro-text" style="display: none;">Hi</p>
        <p class="intro-text" style="display: none;">This is Yash Verdhan Gupta</p>
        <p class="intro-text" style="display: none;">And i am a ....</p>
    </div>
</body>

JS

const introtext = document.querySelectorAll('.intro-text')

introtext.forEach((element) => {
    var text = element.innerText;
    var textlenght = text.length;
    element.style.display = 'block';
    var newtext = '';
    var i = 0;
    setInterval(writer, 200)
    function writer() {
        element.innerText = Newtext();
    }
    function Newtext() {
        if (i < textlenght) {
            newtext = newtext + text.charAt(i);
            i++
        }
        return newtext
    }
})```

Use `for` loop with async/await instead. `forEach` does not pause. — Terry, Feb 06 '22 at 15:06
can you please help by providing code I m new to JS so its getting difficult to figure this out — Yvgupta, Feb 08 '22 at 14:12

How to set time gap between each iteration of foreach() in js

0 Answers0