CODEWITHSUNDEEP
javascriptkeyboard-events
Timble
Timble

Reputation: 499

Want to add Delay to a Keydown event

I have found similar threads but they only talk about removing the initial delay, not setting a delay.

I have a game that moves the user accordingly if wasd is pressed and moves them to the next grid coordinate. However, if the user holds down any of the wasd keys, they shoot across nearly instantly, which I would rather not have. I have tried to create a delay in the movement, which works if you tap the key fast but not if held down. I have the following code:

window.addEventListener("keydown", onKeyDown, false);

function onKeyDown(event) {
 var keyCode = event.keyCode;
  if (canMove == true) {
   switch (keyCode) {
    case 68: //d
     keyD = true;
     canMove = false;
     break;
    case 83: //s
     keyS = true;
     canMove = false;  
     break;
    case 65: //a
     keyA = true;
     canMove = false;    
     break;
    case 87: //w
     keyW = true;
     canMove = false;
     break;
 }
setTimeout(function(){canMove = true;}, 400); 
}
checkMovement();
}

My problem: I can press 'a' for example and zoom across the map nearly instantly. I want their to be a delay, of say 200-500ms so that they move at a steady slow rate. How to fix this?

Upvotes: 1

Views: 5790

Answers (4)

Mulan
Mulan

Reputation: 135197

Here's a little demo that uses a max key repeat rate of once per 250 ms.

Click the Run code snippet button, click in the blank area to give it focus, then press W A S D on your keyboard

window.addEventListener("keydown", (function(canMove) {
  return function(event) {
    if (!canMove) return false;
    canMove = false;
    setTimeout(function() { canMove = true; }, 250);
    switch (event.keyCode) {
      case 68: return move("right");
      case 83: return move("down");
      case 65: return move("left");
      case 87: return move("up");
    }  
  };
})(true), false);

function move(direction) {
  console.log("move: %s", direction);
}

Upvotes: 5

Koborl
Koborl

Reputation: 235

var moveListener = null;

window.addEventListener("keydown", onKeyDown, false);
window.addEventListener("keyup", onKeyUp, false);

function onKeyDown(event) {
	var keyCode = event.keyCode;
  //prevent reseting event listener on hold down also will prevent up,left diagonal type movement
  if (moveListener === null) {
   	moveListener = setInterval(move(keyCode),400);
  }
}

function onKeyUp (event){
  	clearInterval(moveListener);
    moveListener = null;
}

function move (direction){
	//move code here
}

Haven't tested it but you get the general idea.

Upvotes: 0

Swapnil
Swapnil

Reputation: 358

function onKeyDown(event) {
    var keyCode = event.keyCode;

    if (canMove == true) {
        setTimeout(function () {
            switch (keyCode) {
                case 68: //d
                    keyD = true;
                    canMove = false;
                    break;
                case 83: //s
                    keyS = true;
                    canMove = false;
                    break;
                case 65: //a
                    keyA = true;
                    canMove = false;
                    break;
                case 87: //w
                    keyW = true;
                    canMove = false;
                    break;
            }
        }, 400);
    }
    checkMovement();
}

try this :

Upvotes: -1

maulik sakhare
maulik sakhare

Reputation: 2037

You can try 

   window.addEventListener("keydown", 
             setTimeout(function(){ 
               onKeyDown()
              }, 5000) 
   , false);

Upvotes: -1

Related Questions