Executing the next function after promise() is not functioning properly in pure JavaScript

Question

Executing the next function after promise() is not functioning properly in pure JavaScript

I'm completely new to Javascript development.

CURRENT PROJECT - At the moment, I am immersed in developing a web chatbot application.

AN ISSUE - I am encountering difficulties using the promise() function to execute more than one function sequentially.

SOURCE CODE -

var messages = [
  `Hello there!`,
  `Just wanted to let you know that I'm throwing a birthday party this Sunday at my place.`,
  `It would mean a lot if you could make it.`,
];

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

You can check out the code live here as well.

How can I ensure that the 2nd function runs only after the completion of the startChat() function?

javascript function promise

Answer 1

Answer №1

Currently you are returning 1 promise for 3 operations, but it appears that all 3 operations should be asynchronous. To achieve this, you will need to return a promise for each async operation.

You may want to consider something like the following:

const messages = [
  `Hello there!`,
  `I'm throwing a party this weekend at my place to celebrate my birthday`,
  `It would mean a lot if you could join me`,
];

const chatBox = document.querySelector(".message-box");

const initiateChat = () => messages.map(
    // Returns an array of promises wrapping
    // each message as a promise
    (message, index) => new Promise(resolve => {
        setTimeout(() => {
            chatBox.innerHTML += `
            <div class="chat-message">
                <div class="message-content">
                    <p>${message}</p>
                </div>
            </div>`;
            resolve(message);
        }, 2000 * index);
    })
);

Promise.all(initiateChat())
    .then(args => {
        // args will contain the same strings as in 'messages'
        console.log("Completed Functions", args);
    });

If you wish to execute a callback function before or after each message is displayed, I recommend passing the callback as an argument to initiateChat and calling it when necessary.

Answer 2

Currently you are returning 1 promise for 3 operations, but it appears that all 3 operations should be asynchronous. To achieve this, you will need to return a promise for each async operation.

You may want to consider something like the following:

const messages = [
  `Hello there!`,
  `I'm throwing a party this weekend at my place to celebrate my birthday`,
  `It would mean a lot if you could join me`,
];

const chatBox = document.querySelector(".message-box");

const initiateChat = () => messages.map(
    // Returns an array of promises wrapping
    // each message as a promise
    (message, index) => new Promise(resolve => {
        setTimeout(() => {
            chatBox.innerHTML += `
            <div class="chat-message">
                <div class="message-content">
                    <p>${message}</p>
                </div>
            </div>`;
            resolve(message);
        }, 2000 * index);
    })
);

Promise.all(initiateChat())
    .then(args => {
        // args will contain the same strings as in 'messages'
        console.log("Completed Functions", args);
    });

If you wish to execute a callback function before or after each message is displayed, I recommend passing the callback as an argument to initiateChat and calling it when necessary.

Executing the next function after promise() is not functioning properly in pure JavaScript

Answer №1

Similar questions

Is it possible to transform an array into a JSON file and securely store/upload it in an AWS S3 bucket?

Merging a prop of array type in a Vue component

Enhancing Textures in Three.js: Methods for Gradually Improving Resolution

Convert epoch time to HHMM format using JavaScript

Vanishing HTML upon initial entry to the site using Gatsby and Material UI exclusively in live deployment

Having trouble displaying the time in the middle square when pressing TouchableOpacity in React Native?

What external libraries does Angular 4 utilize during execution, aside from RxJS?

Utilizing AngularJS to create an auto complete feature integrated with a SQL Server database

Verify if the React component is empty

Function defined as an AngularJS component

What is the method to process a JSON path containing a special character like "@"?

Getting rid of an Ajax loader graphic after a period of time

Creating JavaScript object fields with default values in an AngularJS model: A Step-by-Step Guide

Guide to displaying query results separately on a single webpage

How can I convert a button to a link within an HTML table?

Is it possible for Javascript to malfunction on ajax-generated code?

Utilizing a range input (slider) to extract data of importance

The content of the snackbar message remains static and does not update dynamically

Having trouble populating Extjs Grid with JSON data

Extracting image tooltip data through web scraping