How can I slowly display a message character by character using setIterval?

Question

FYI--- I read the duplicate to this question and got nowhere.

I Have a website up on fire base here and if you see there's a button div that reads "See what I can do" I want to to display that message one character at a time. I immediately thought of using a for loop and str.substr() as well as an interval. This is all my brain could muster

const msg = "See What I can do";

function displayMsg(msg) {
    let newMsg = "";
    for(let i = 0; i < msg.length + 1; i++) {
         console.log(msg.substr(0, i));
    }
}

setInterval(displayMsg(msg), 1000);

doesn't work because it just runs through the whole loop. How can I make it stop and wait 1s every iteration? Is there a more popular approach to this problem?

Does this answer your question? [jQuery: Wait/Delay 1 second without executing code](https://stackoverflow.com/questions/8896327/jquery-wait-delay-1-second-without-executing-code) — But those new buttons though.., Mar 28 '20 at 04:51

score 0 · Accepted Answer · answered Mar 28 '20 at 04:50

0

For each index i of the message, you can set a timeout to run after i * 1000 ms which will append to (or replace) the existing text:

const msg = "See What I can do";
for (let i = 0; i < msg.length; i++) {
  setTimeout(() => {
    target.textContent += msg[i];
  }, i * 1000);
}

<div id="target"></div>

Another option, with await:

(async () => {
  const msg = "See What I can do";
  for (const char of msg) {
    target.textContent += char;
    await new Promise(res => setTimeout(res, 1000));
  }
})();

<div id="target"></div>

answered Mar 28 '20 at 04:50

CertainPerformance

356,069
52
309
320

Thank you! are these methods the ones typically used when using that dynamic typing effect you see on all these websites? – yomomma Mar 28 '20 at 05:14
I don't know which websites you're referring to, but there are multiple ways to achieve it, these are only 2 possibilities. – CertainPerformance Mar 28 '20 at 05:15

ray · Answer 2 · 2020-03-28T05:00:51.790

A simple recursive function does the trick:

function typeOn (message, container, interval = 200) {
  // split the first character and the remainder of the message
  const [c, ...rest] = message;

  // append the character
  container.innerHTML += c;

  // if there's anything left do it again after a delay
  if (rest.length) {
    setTimeout(() => typeOn(rest, container, interval), interval);
  }
}

// find the element you want to type into
const el = document.querySelector('div');

// pass in the text, the element, and (optional) speed
typeOn('Wookies and hats and bananas, oh my!', el, 100);

<div></div>

How can I slowly display a message character by character using setIterval?

2 Answers2