Как реализовать выполнение скрипта по действиям с отображением?
Проектирую систему массового обслуживания, столкнулся с такой проблемой: нужно отрисовывать поступающие заявки и через определенный промежуток времени задать анимацию выхода, а затем удалить их. Проблема в том, что скрипт выполняется моментально (это меня не удивляет). Пробовал задать и 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 { |
Fijeralt123,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.simulator-QS__channel {
position: relative;
width: 50px;
height: 50px;
background: #000; }
.simulator-QS__application {
width: 20px;
height: 20px;
border-radius: 10px;
position: relative;
left: 15px;
bottom: -30px;
background: red;
}
.simulator-QS__application.app {
animation: valid-app 0.1s ease-in-out forwards;
}
.simulator-QS__application.leave {
animation: valid-app--leave 0.1s ease-in-out forwards; }
@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; } }
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var allApplications = document.getElementsByClassName("all-applications");
var validApplications = document.getElementsByClassName("valid-applications");
var invalidApplications = document.getElementsByClassName("invalid-applications");
function addCls(elem, cls, parent) {
return function() {
parent && parent.appendChild(elem);
elem.classList.add(cls)
}
}
function removeElem(elem, parent) {
return function() {
parent.removeChild(elem)
}
}
function simulationQS() {
var lambda =
1,
all = 0,
valid = 0,
invalid = 0,
time = 0;
var simulatorQS = document.getElementsByClassName("simulator-QS");
var parent = simulatorQS[0];
for (var i = 0; i < 20; i++) {
all++;
allApplications[0].innerHTML = "Всего поступающих заявок: " + all;
var newApplication = document.createElement("div");
newApplication.className = "simulator-QS__application";
if (Math.random() < .5) {
valid++;
validApplications[0].innerHTML = "Заявки на обслуживание: " +
valid
} else {
invalid++;
invalidApplications[0].innerHTML = "Отказано в обслуживании: " + invalid
}
window.setTimeout(addCls(newApplication, "app", parent), i * 100);
window.setTimeout(addCls(newApplication, "leave"), i * 100 + 60 * 105);
window.setTimeout(removeElem(newApplication, parent), i * 100 + 60 * 105 + 100)
}
}
simulationQS()
});
</script>
</head>
<body>
<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>
</body>
</html>
|
Да, почти то, что нужно. А как сделать, чтобы перед появлением второй заявки, первая уходила. То есть не образовывалась очередь, а была только одна заявка в очереди
Класс, у меня даже так не получалось сделать. |
Fijeralt123,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.simulator-QS__channel {
position: relative;
width: 50px;
height: 50px;
background: #000; }
.simulator-QS__application {
width: 20px;
height: 20px;
border-radius: 10px;
position: relative;
left: 15px;
bottom: -30px;
background: red;
}
.simulator-QS__application.app {
animation: valid-app 0.1s ease-in-out forwards;
}
.simulator-QS__application.leave {
animation: valid-app--leave 0.1s ease-in-out forwards; }
@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; } }
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var allApplications = document.getElementsByClassName("all-applications");
var validApplications = document.getElementsByClassName("valid-applications");
var invalidApplications = document.getElementsByClassName("invalid-applications");
function addCls(elem, cls, parent) {
return function() {
parent && parent.appendChild(elem);
elem.classList.add(cls)
}
}
let i = 20,
all = 0,
valid = 0,
invalid = 0,
simulatorQS = document.getElementsByClassName("simulator-QS"),
parent = simulatorQS[0];
function removeElem(elem, parent) {
return function() {
parent.removeChild(elem);
--i && simulationQS()
}
}
function simulationQS() {
all++;
allApplications[0].innerHTML = "Всего поступающих заявок: " + all;
var newApplication = document.createElement("div");
newApplication.className = "simulator-QS__application";
if (Math.random() < .5) {
valid++;
validApplications[0].innerHTML = "Заявки на обслуживание: " +
valid
} else {
invalid++;
invalidApplications[0].innerHTML = "Отказано в обслуживании: " + invalid
}
window.setTimeout(addCls(newApplication, "app", parent), 0);
window.setTimeout(addCls(newApplication, "leave"), 300);
window.setTimeout(removeElem(newApplication, parent), 450)
}
simulationQS()
});
</script>
</head>
<body>
<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>
</body>
</html>
|
рони,
Вы мне очень сильно помогли. Огромное спасибо! |
рони,
Хоть убейте, не могу ваш код переделать под свои условия. Либо делаю переполнение стека браузера, либо начинают выводиться все заявки сразу, либо и то и другое вместе. Прошу еще раз помощи. У меня есть условная единица времени i она равняется секунде. Мне нужно провести симуляцию одного часа. Заявка поступает в секунду с вероятностью Math.random() < .02. И после, эта заявка попадает на обслуживание равное time. Следующие заявки, если поступают, когда заявка обслуживается(time !=0) отклоняются. Когда заявка обслужится она уходит и след. заявка может попасть на обслуживание |
Fijeralt123,
не могу представить, ... что вам нужно |
| Часовой пояс GMT +3, время: 14:53. |