Форум

Fijeralt123 · #1 (**permalink**) 05.06.2018, 10:50

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

рони · #2 (**permalink**) 05.06.2018, 11:56

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 · #3 (**permalink**) 05.06.2018, 12:02

Да, почти то, что нужно. А как сделать, чтобы перед появлением второй заявки, первая уходила. То есть не образовывалась очередь, а была только одна заявка в очереди
Класс, у меня даже так не получалось сделать.

рони · #4 (**permalink**) 05.06.2018, 12:13

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>

Fijeralt123 · #5 (**permalink**) 05.06.2018, 12:17

рони,
Вы мне очень сильно помогли. Огромное спасибо!

Fijeralt123 · #6 (**permalink**) 05.06.2018, 13:57

рони,
Хоть убейте, не могу ваш код переделать под свои условия. Либо делаю переполнение стека браузера, либо начинают выводиться все заявки сразу, либо и то и другое вместе. Прошу еще раз помощи.
У меня есть условная единица времени i она равняется секунде. Мне нужно провести симуляцию одного часа. Заявка поступает в секунду с вероятностью Math.random() < .02. И после, эта заявка попадает на обслуживание равное time. Следующие заявки, если поступают, когда заявка обслуживается(time !=0) отклоняются. Когда заявка обслужится она уходит и след. заявка может попасть на обслуживание

рони · #7 (**permalink**) 05.06.2018, 15:22

Fijeralt123,
не могу представить, ... что вам нужно

Форум

Справочник

Discord чат

Курсы javascript