Всплывающие окна - одно за другим

Question

Я хочу показать пользователю всплывающие окна в течение 2 секунд, один за другим (может быть любым числом, предположим, 17). какие-нибудь идеи, как это сделать?

function sleep(miliseconds) {
  var currentTime = new Date().getTime();

  while (currentTime + miliseconds >= new Date().getTime()) {
  }
}

/*First option*/ 

function printFailureMessages (failureMessages){
  failureMessages.forEach(message => {
      document.getElementById("myPopup").innerHTML = message;
      document.getElementById("myPopup").classList.toggle("show");
      sleep(1500);
      document.getElementById("myPopup").classList.toggle("show");
  });
}

/*Second option*/

function printFailureMessages (failureMessages){
  failureMessages.forEach(message => {
      document.getElementById("myPopup").innerHTML = message;
      document.getElementById("myPopup").classList.toggle("show");
      setTimeout(function(){
        document.getElementById("myPopup").classList.toggle("show");
      },1500);
  });
}

хорошо работает, когда размер faultMessages равен единице ... Кстати - я попробовал еще несколько вариантов с setTimeOut, не удалось ..

Answer 1

Вы можете попробовать использовать async/await для этого как:

// Return a promise that resolves after "miliseconds" milliseconds
function sleep(miliseconds) {
   return new Promise(res => setTimeout(res, miliseconds));
}

// Make this function async function
async function printFailureMessages(failureMessages) {
   for (var i = 0; i < failureMessages.length; i++) {
      document.getElementById("myPopup").innerHTML = failureMessages[i];
      document.getElementById("myPopup").classList.toggle("show");
      await sleep(1500); // wait for this promise to finish
      document.getElementById("myPopup").classList.toggle("show");
   }
}

printFailureMessages(['Hello', 'World']);