Skip to content

Instantly share code, notes, and snippets.

@rik
Created September 1, 2017 14:30
  • Star 10 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
Fake typing animation with async/await
async function nextFrame() {
return new Promise((resolve) => {
requestAnimationFrame(resolve)
})
}
async function randomDelay(min, max) {
const delay = Math.random() * (max - min) + min;
const startTime = performance.now()
while (performance.now() - startTime < delay) {
await nextFrame()
}
}
async function simulateTyping({string, target, min = 10, max = 80}) {
for (const letter of string) {
target.insertAdjacentText("beforeend", letter)
await randomDelay(min, max)
}
}
@rik
Copy link
Author

rik commented Sep 1, 2017

// Example

simulateTyping({
  string: "hello world",
  target: document.querySelector(".fake-input"),
}).then(() => console.log("done"))

@sgriffey
Copy link

sgriffey commented Sep 1, 2017

@rik rookie q:
how would you get it to "erase" typing, then loop through an array of strings

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment