Using promise() to run next function doesn't work - PLAIN JAVASCRIPT

Question

I'm very new to Javascript development.

PROJECT - I'm currently working on a web chatbot application.

PROBLEM - I'm not able to use the promise() function to run more than one function one after another.

CODE -

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");
});

You can also see the code live here

How do I get the 2nd function to run after the startchat() [the first function] ends.

Answer 1

Now you return 1 promise for 3 operations but it looks like you meant to make all 3 operations async. To achieve this, you need to return a promise, for each async operation.

You might be looking for something like this:

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);
    });

If you would like to invoke a callback before/after each message is printed, I'd suggest to pass the callback as an argument to startChat & invoke it when needed.