Question

我想在JS中用承诺创建一个虚假的讨论。

console.log等待X秒，
console.log等待X秒......

这是我的代码：

var addMessage = function (msg) {
  return new Promise(function (resolve, reject) {
    setTimeout( function() {
      console.log(msg)
      resolve()
    }, 2500)
  })
}

var scenario = function() {
  addMessage('Hello who are you ?')
  .then(addMessage('Hello I am John'))
  .then(addMessage('Nice too meet you'))
  .then(addMessage('Me too'))
  .then(addMessage('Good Bye'))
  .then(addMessage('Bye'))
} 

scenario()

但是使用这段代码，所有的console.log（）都是在同一时间（2500ms之后）完成的，我是承诺的新手，我真的不掌握它们。

谢谢！

Answer 1

托马斯在评论中总结得非常好：

then（）需要一个函数，但addMessage（）返回一个Promise。一个承诺不是一种功能。并且，你的所有承诺都是在同时，这也是他们同时开火的原因

您正在构建所有新Promise，因此它们将立即执行，并且计时器也将同时结束。为了缓解这个问题，您可以将addMessage包含在.then调用内的函数中。

addMessage('Hello who are you ?')
  .then(function () { addMessage('Hello I am John') })
  .then(function () { addMessage('Nice too meet you') })
  .then(function () { addMessage('Me too') })
  .then(function () { addMessage('Good Bye') })
  .then(function () { addMessage('Bye') })

或者你也可以使用Function.prototype.bind()来避免每次都写一个匿名函数。

addMessage('Hello who are you ?')
  .then(addMessage.bind(null, 'Hello I am John'))
  .then(addMessage.bind(null, 'Nice too meet you'))
  .then(addMessage.bind(null, 'Me too'))
  .then(addMessage.bind(null, 'Good Bye'))
  .then(addMessage.bind(null, 'Bye'))

当然，如果您的环境运行的是最新版本的JavaScript，您也可以使用arrow functions：

addMessage('Hello who are you ?')
  .then(() => addMessage('Hello I am John'))
  .then(() => addMessage('Nice too meet you'))
  .then(() => addMessage('Me too'))
  .then(() => addMessage('Good Bye'))
  .then(() => addMessage('Bye'))

在不久的将来，您还可以使用await keyword，完全无需任何.then来电：

await addMessage('Hello who are you ?')
await addMessage('Hello I am John')
await addMessage('Nice too meet you')
await addMessage('Me too')
await addMessage('Good Bye')
await addMessage('Bye')

承诺链接功能相同

1 个答案: