Кодът за единично натискане на клавиш се изпълнява заедно с кода за многократно натискане на клавиш

Опитвам се да поставя някаква основна анимация на jQuery върху елемент, базиран на едно или множество събития на натискане на клавиш със стрелка. Целта е да се анимира елементът в посоката на клавиша/клавишите, които са били натиснати. Следвах подхода, който беше обсъден тук за откриване на многократно натискане на клавиши. Но по някаква причина, когато са натиснати няколко клавиша, кодът за еднократно натискане на който и да е от клавишите се изпълнява на случаен принцип заедно с кода за многократно натискане на клавиши. Но ако коментирам кода от ред 25-41, събитията от многократно натискане на клавиши работят според очакванията. Не мога да разбера какво не е наред.

var key = [];
$(document).keydown(function(e) {
  key[e.which] = true;
}).keyup(function(e) {
  if (key[37] && key[38]) {
    $('.box').animate({
      'top': '-=50px',
      'left': '-=50px'
    }, 250);
  } else if (key[39] && key[40]) {
    $('.box').animate({
      'top': '+=50px',
      'left': '+=50px'
    }, 250);
  } else if (key[38] && key[39]) {
    $('.box').animate({
      'top': '-=50px',
      'left': '+=50px'
    }, 250);
  } else if (key[37] && key[40]) {
    $('.box').animate({
      'top': '+=50px',
      'left': '-=50px'
    }, 250);
  } else if (key[37]) {
    $('.box').animate({
      'left': '-=50px'
    }, 250);
  } else if (key[38]) {
    $('.box').animate({
      'top': '-=50px'
    }, 250);
  } else if (key[39]) {
    $('.box').animate({
      'left': '+=50px'
    }, 250);
  } else if (key[40]) {
    $('.box').animate({
      'top': '+=50px'
    }, 250);
  }
  key[e.which] = false;
});
* {
  margin: 0;
  padding: 0;
}
.container {
  border: 1px solid #ccc;
  height: 250px;
  margin: 49px;
  position: relative;
  width: 250px;
}
.box {
  background-color: #ccc;
  height: 50px;
  left: 50%;
  margin: -25px 0 0 -25px;
  position: absolute;
  top: 50%;
  width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="box"></div>
</div>


javascript jquery keypress jquery-animate
person Rivnat    schedule 31.08.2015    source източник

Отговори (1)


arrow_upward
1
arrow_downward

След като изпълните тези стъпки:

  1. натискам
  2. Натиснете наляво
  3. Освободете надолу

вашият ключов масив съдържа истински стойности при key[37] (вляво) и key[40] (надолу). Когато keyup() се изпълни, той ще приложи animate() във вашия четвърти оператор if, но ще изчисти само key[40]. След това, когато пуснете левия клавиш, вашият ключов масив все още съдържа истинска стойност в key[37], така че keyup() прилага animate() във вашия пети оператор if. Ето защо виждате множество действия.

Едно възможно решение е да се изчистят и двата записа в ключовия масив, ако се изпълни един от първите четири оператора if. Това вероятно би трябвало да е наред с начина, по който тълкувам вашите потребители като взаимодействащи със страницата, тъй като те ще натискат и пускат двата клавиша едновременно.

person Ryan    schedule 31.08.2015
comment
страхотен съвет относно изчистването на масива в първите четири if-else израза, проработи. Правех го след целия блок if-else. Също така благодаря за вашето обяснение. - person Rivnat; 01.09.2015