如何在不使用 async/await 的情况下重写 function？

Question

I've used Promise and async/await to code 2 functions that print provided word letter after letter with 500ms delay:

 function injectText(value, selector) { return new Promise((resolve, reject) => { setTimeout(() => { document.querySelector(selector).innerHTML = value resolve() }, 500) }) } async function printWord(word, selector) { for (let i = 0; i < word.length; i++) { await injectText(word.substring(0, i + 1), selector) } } printWord('Hello', '.hello')

 <div class="hello"></div>

I'm trying to figure out how I can rewrite printWord without using async/await to get the same result. I understand that it kind of should produce something like this:

  injectText('H', '.hello')
  .then(() => {
    return injectText('He', '.hello')
  })
  .then(() => {
    return injectText('Hell', '.hello')
  })
  .then(() => {
    return injectText('Hello', '.hello')
  })

However, I have no idea how to rewrite printWord to achieve this. I'd appreciate any help.

Answer 1

You could use array reduce like so:

 function injectText(value, selector) { return new Promise((resolve, reject) => { setTimeout(() => { document.querySelector(selector).innerHTML = value resolve() }, 500) }) } function printWord(word, selector) { return word.split('') // results in an array word.length long.reduce((p, _, i) => p.then(() => // wait for the previous promise injectText(word.substring(0, i + 1), selector) // do the thing and return the new promise for the next iteration ), Promise.resolve()) // initial promise for first iteration } printWord('Hello', '.hello')

 <div class="hello"></div>

Answer 2

 const interval = 100 const word = 'Hello World.' word.split(''),forEach((letter. index) => setTimeout(() => console,log(letter), interval * index))