使用 promise() 运行下一个函数不起作用 - PLAIN JAVASCRIPT

Question

我是 Javascript 开发的新手。

项目 - 我目前正在开发网络聊天机器人应用程序。

问题 - 我无法使用 promise() 函数一个接一个地运行多个函数。

代码 -

var messages = [

  `Hello name`,

  `I'm hosting a party on Sunday at my house, for my birthday`,

  `I'll be really happy if you'd come`,

];

chatWindow = document.querySelector(".message-day");

const startChat = () => {

  return new Promise(function (resolve, reject) {

    messages.forEach((message) => {

      setTimeout(() => {

        chatWindow.innerHTML += `

        <div class="message">

            <div class="message-wrapper">

                <div class="message-content">

                 <h6 class="text-dark">Karan</h6>

                 <span>${message}</span>

                 </div>

            </div>

            <div class="message-options">

                 <div class="avatar avatar-sm"><img alt="" src="./assets/media/avatar/6.png"></div>

                  <span class="message-date">9:12am</span> 

            </div>

        </div> `;

      }, 2000);

    });

    resolve();

  });

};

startChat().then(() => {

  console.log("2nd Functions");

});

您还可以在此处查看代码

如何让第二个函数在startchat() [第一个函数] 结束后运行。

Answer 1

现在您为 3 个操作返回 1 个承诺，但看起来您打算让所有 3 个操作异步。为此，您需要为每个异步操作返回一个承诺。您可能正在寻找这样的东西：const messages = [&nbsp; `Hello name`,&nbsp; `I'm hosting a party on Sunday at my house, for my birthday`,&nbsp; `I'll be really happy if you'd come`,];const chatWindow = document.querySelector(".message-day");const startChat = () => messages.map(&nbsp; &nbsp; // Returns array of promises wrapping&nbsp; &nbsp; // each message into a promise&nbsp; &nbsp; (message, index) => new Promise(resolve => {&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chatWindow.innerHTML += `&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="message">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="message-wrapper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="message-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h6 class="text-dark">Karan</h6>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span>${message}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="message-options">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="avatar avatar-sm"><img alt="" src="./assets/media/avatar/6.png"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="message-date">9:12am</span>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>`;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resolve(message);&nbsp; &nbsp; &nbsp; &nbsp; }, 2000 * index);&nbsp; &nbsp; }));Promise.all(startChat())&nbsp; &nbsp; .then(args => {&nbsp; &nbsp; &nbsp; &nbsp; // args will contain same strings as messages&nbsp; &nbsp; &nbsp; &nbsp; console.log("2nd Functions", args);&nbsp; &nbsp; });如果您想在打印每条消息之前/之后调用回调，我建议将回调作为参数传递给startChat并在需要时调用它。