使用 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 = [

  `Hello name`,

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

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

];

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

const startChat = () => messages.map(

    // Returns array of promises wrapping

    // each message into a promise

    (message, index) => new Promise(resolve => {

        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>`;

            resolve(message);

        }, 2000 * index);

    })

);

Promise.all(startChat())

    .then(args => {

        // args will contain same strings as messages

        console.log("2nd Functions", args);

    });

如果您想在打印每条消息之前/之后调用回调，我建议将回调作为参数传递给startChat并在需要时调用它。