Не могу додуматься как сделать генератор обьектов с движением

Question

Мне нужно сделать безперерывную генерацию обьектов, что бы они двигались и потом пропадали. "движение электронов в проводнике в грубой форме" вот что это.

Оно более менее работает, но только когда нажимается кнопка, а когда пытаюсь сделать "while(x==1)", то всё зависает. Я совершенно зелёный да и мне это на один раз. Спасибо.

        function getRndInteger(min, max) {
            return Math.floor(Math.random() * (max - min)) + min;
            }
        var x;
        var boxW = $('.prov').width();
        var boxH = $('.prov').height(); 
        
        $('#on-off').on('click', function () {
            if ($(this).is(':checked') ) {
                x = 25;

            }else {
                x = 0;
            }                   
            while(x >= 1){
            var y = getRndInteger(0,boxH);
            var x = getRndInteger(0,50);
            $('.prov ').prepend($('<div>', {
                'class': 'electron'
                
            }).css({'top': y, 'left': x}).animate({'left': boxW}, 1000, 'linear'));
            x--;
            }

        })

Answer 1

Если я правильно понял, пока чекбокс включен - бесконечно генерируем протоны

While в принципе не нужен.

Обратите внимание проверку на чекбокс перенес в callback complete метода .animate(), если чекбокс включен - генерируем новый протон

console.clear()

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}
var x = 25;
var boxW = $('.prov').width();
var boxH = $('.prov').height();

$('#on-off').on('click', function() {
  for (let i = 0; i <= x; i++) {
    addProtons()
  }
})


function addProtons() {
  var y = getRndInteger(0, boxH);
  var x = getRndInteger(0, 50);
  let proton = $('<div>', {
    'class': 'electron'

  }).css({
    'top': y,
    'left': x,
    'opacity':0 // прячем при генерации
  });
  $('.prov ').prepend(proton)
  let delay = getRndInteger(300, 5000)
  setTimeout(()=>animateProtons(proton), delay)  // рандомная задержка, чтоб протоны не толпой летели
}


function animateProtons(proton) {
$(proton).css({"opacity": 1}) // показываем, начинается анимация
  $(proton).animate({
    left: "+=500"
  }, 3000, "linear", function() {
    $(proton).remove();
    if($('#on-off').is(':checked')){
      addProtons()
    }
  })
}

.prov {
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.electron {
  position: absolute;
  background: #336699;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="on-off"></input>
<div class="prov">
</div>

Я не уверен что протоны рандомно двигаются, если они толпой должны двигатся, то уберите setTimeout и вызывайте сразу движение

БЛОГ НА HUSL

Не могу додуматься как сделать генератор обьектов с движением

Ответы (1 шт):