Как прослушать событие щелчка внутри того же события Javascript - PullRequest
Новая
       40

Как прослушать событие щелчка внутри того же события Javascript

0 голосов
/ 02 декабря 2018

Я хочу, чтобы элемент div перемещался до тех пор, пока он снова не щелкнет, после чего он должен остановиться в своем текущем местоположении.Есть ли конкретный способ прослушивания одного и того же события внутри события?Перемещение div вокруг не проблема.Я просто не могу понять, как заставить это остановиться.Может кто-нибудь объяснить мне, почему то, что у меня не работает? 

var clickTracker = false;

$("#div3").click(function() {
     if(clickTracker === false){
        var width = $(window).width();
        var height = $(window).height();
        for(var i = 0; i < 1000; i++){
            const randomLeft = Math.floor(Math.random() * (width - 200))-1;
            const randomHeight = Math.floor(Math.random() * (height - 200))-1;
            $("#div3").animate({left: '+='+randomLeft}, 500).animate({top: '+='+randomHeight}, 500);                            
            $("#div3").click(function() {
                clickTracker = true;
                break;
            });         
        }
    }
    else{
        clickTracker = false;
    }
});

1 Ответ

0 голосов
/ 02 декабря 2018 

var clickTracker = false;

$("#div3").click(function() {
  if (clickTracker === false) {
    clickTracker = true;
    var width = $(window).width();
    var height = $(window).height();

    for (var i = 0; i < 10; i++) {
      const randomLeft = Math.floor(Math.random() * ((width - currentPos.left) - 200)) - 1;
      const randomHeight = Math.floor(Math.random() * ((height - currentPos.top) - 200)) - 1;

      console.log("putting stuff in animation queue");
      $("#div3").animate({
        left: '+=' + randomLeft
      }, 5000).animate({
        top: '+=' + randomHeight
      }, 5000);
    }
  } else {
    clickTracker = false;
    $("#div3").stop(true);
  }
});
#div3 {
  width: 100px;
  height: 100px;
  background: black;
  position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div3"></div>

Я понимаю, почему вашей первой мыслью было вызвать функцию щелчка в for-loop, но если вы смотрели в консоль после нажатия наво второй раз вы бы увидели, что вы использовали break неправильным способом - вызывая новую функцию, вы изменяете область действия, и оператор break пытался выйти из функции (что вы можетене нужно, вы должны использовать return для этого), а не цикл.Также не очень хорошая идея иметь два обработчика для одного и того же события.Это то, что сбивает с толку компьютеры.:)

Также стоит отметить, что for loop может работать не так, как вы думаете.Что он на самом деле делает (вы можете увидеть это, если посмотрите на консоль для фрагмента), заполняет очередь анимации для div.Этот цикл запускается десять раз (я изменил его на десять ради здравого смысла), генерирует случайное число, а затем помещает его в список мест для отправки div, и все это за считанные миллисекунды.Вы можете думать об этом так: $("#div3").animate().animate().animate() ... etc Но важно отметить, что вы никогда не нажимаете на этот div до окончания for loop.

Читайте stop() здесь .

...