Skip to content

Instantly share code, notes, and snippets.

@rik
Created September 1, 2017 14:30
Show Gist options
  • Save rik/56638f4efdd808c9af0e1a43b297d1a2 to your computer and use it in GitHub Desktop.
Save rik/56638f4efdd808c9af0e1a43b297d1a2 to your computer and use it in GitHub Desktop.
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