Как реализовать выполнение скрипта по действиям с отображением?

Question

[Cerega32]

Проектирую систему массового обслуживания, столкнулся с такой проблемой: нужно отрисовывать поступающие заявки и через определенный промежуток времени задать анимацию выхода, а затем удалить их. Проблема в том, что скрипт выполняется моментально (это меня не удивляет). Пробовал задать 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; } }

Answer 1

[MrTimon]

Но до конца понял ваш скрипт (сильно не увлекался), но есть же setTimeout думаю это должено помочь: когда нужно добавляєтее елемент потом через setTimeout указываете ему класс и еще один setTimeout удаляете елемент.

Не лутшее реашение как по мне, лутше можна анимацию тоже js-сом сделать и работать з калбеками.