Блог

Я очень новичок в разработке 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");
});

  

Вы также можете посмотреть код в реальном времени здесь

Как мне запустить 2-ю функцию после завершения startchat()[первая функция].

Теперь вы возвращаете 1 обещание для 3 операций, но, похоже, вы хотели сделать все 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 и вызывать его при необходимости.