[Fijeralt123]

Проектирую систему массового обслуживания, столкнулся с такой проблемой: нужно отрисовывать поступающие заявки и через определенный промежуток времени задать анимацию выхода, а затем удалить их. Проблема в том, что скрипт выполняется моментально (это меня не удивляет). Пробовал задать и setTimeout и setInterval, выходило со всем не то, что нужно, либо я не правильно писал. Знаю, что нельзя остановить выполнение скрипта, как это делает sleep в c++. И поэтому не получается решить это

<div class="simulator-QS">
  <div class="simulator-QS__channel"></div>
</div>
<p class="all-applications"></p>
<p class="valid-applications"></p>
<p class="invalid-applications"></p>

let allApplications = document.getElementsByClassName("all-applications");
let validApplications = document.getElementsByClassName("valid-applications");
let invalidApplications = document.getElementsByClassName("invalid-applications");
function simulationQS() {
  let lambda = 1, all = 0, valid = 0, invalid = 0, time = 0 ;
  let simulatorQS = document.getElementsByClassName("simulator-QS");
  for (var i=0; i<3600; i++)  {
    if(Math.random() < 1/60){
   		all++; 
      allApplications[0].innerHTML = "Всего поступающих заявок: " + all;
      if (time == 0) {
        let newApplication = document.createElement("div");
        simulatorQS[0].appendChild(newApplication);
        newApplication.className = "simulator-QS__application";
        valid++;
        validApplications[0].innerHTML = "Заявки на обслуживание: " + valid;
        time = 70;
      } else {
        invalid++;
        invalidApplications[0].innerHTML = "Отказано в обслуживании: " + invalid;
      }
    }
    if(time==2){
      let newChild = document.getElementsByClassName("simulator-QS__application");
      newChild[0].classList.add("simulator-QS__application--leave");
    }
    if(time==1){
   		let newChild = document.getElementsByClassName("simulator-QS__application");
      simulatorQS[0].removeChild(newChild[0]);
   	}		
   	if(time>0){
   		time--;
   	} 		
  }
}

simulationQS();

.simulator-QS__channel {
  width: 50px;
  height: 50px;
  background: #000; }

.simulator-QS__application {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  position: relative;
  left: 15px;
  background: red;
  animation: valid-app 0.1s ease-in-out; }

.simulator-QS__application--leave {
  animation: valid-app--leave 0.1s ease-in-out; }

@keyframes valid-app {
  from {
    bottom: -30px;
    left: 30px; }
  to {
    bottom: 0;
    left: 15px; } }

@keyframes valid-app--leave {
  from {
    bottom: 0;
    left: 15px; }
  30% {
    left: -15px;
    opacity: 1; }
  to {
    bottom: -40px;
    left: -30px;
    opacity: 0; } }