Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Перемещение картинки без задержки (https://javascript.ru/forum/misc/53127-peremeshhenie-kartinki-bez-zaderzhki.html)

KoliK29 21.01.2015 23:12

Перемещение картинки без задержки
 
Доброго времени суток, дамы и господа.
Как добиться нормального, плавного перемещения картинки при удержании клавиши без задержки?
Проблема такая: жмём клавишу вправо, картинка перемещается (в моём случае на 4 пиксели), застывает на секунду и дальше снова движется без задержек.
Код:
addEventListener("keydown", function(event) {
		positionX = parseInt(document.getElementById("mainTankMove").style.left);
		positionY = parseInt(document.getElementById("mainTankMove").style.top);
		
		if (event.keyCode == 39) {
			if (positionX >= 573) {
				positionX = 572;
			}
			positionX = positionX + 4;
			document.getElementById("mainTankMove").style.left = positionX;
			document.getElementById("mainTank").style.transform = "rotate(90deg)";
		}
	});
	
	addEventListener("keyup", function(event) {
		alert ("qwe");
	}

З.Ы. прошу прощения за кривоту описания, по другому не умею.

danik.js 22.01.2015 11:05

Зависит от Операционки и настроек клавиатуры. keydown сначала генерируется при нажатии, и затем, после задержки генерируется беспрерывно пока не отпустишь клавишу.

Если не устраивает, используй другую логику: Слушай первое событие keydown, в нем делай первое перемещение, запускай таймер, по которому будут делаться остальные перемещения, остальные события keydown игнорируй (либо через флаг, либо через removeEventListener). По keyup останавливаешь таймер и восстанавливаешь обработчик keydown (или очищаешь флаг).

KoliK29 22.01.2015 19:52

Можно разжевать, как для "не очень умных"?
Только начал постигать азы js.
Ах да, код в первом моём сообщении не рабочий:
addEventListener("keydown", function(event) {
	
		positionX = parseInt(document.getElementById("mainTankMove").style.left);
		positionY = parseInt(document.getElementById("mainTankMove").style.top);
		
		if (event.keyCode == 39) {
			if (positionX >= 573) {
				positionX = 572;
			}
			positionX = positionX + 4;
			document.getElementById("mainTankMove").style.left = positionX;
			document.getElementById("mainTank").style.transform = "rotate(90deg)";
		}
}

danik.js 22.01.2015 20:16

KoliK29, что именно не ясно? Задавай конкретные вопросы. И зачем ты постишь опять тот же самый код? Проблемы с памятью?


Часовой пояс GMT +3, время: 10:28.