代码之家 › 专栏 › 技术社区 › Noob

如何在不使用async/await的情况下重写函数?

javascript

Noob · 技术社区 · 4 年前

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>

我在想怎么重写 printWord 不使用 async/await 结果。我知道它应该产生这样的结果:

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

然而,我不知道如何重写

2 回复 | 直到 4 年前

Jaromanda X 4 年前

可以这样使用array reduce:

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>

bel3atar 4 年前

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前