Want to add Delay to a Keydown event

Question

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?

Did you tried this http://stackoverflow.com/questions/1909441/jquery-keyup-delay ? — K K, Jun 04 '16 at 06:30
@KK I didn't really want to use Jquery as that's unexplored territory for myself :) — Timble, Jun 06 '16 at 23:42

Mulan · Accepted Answer · 2016-06-04T06:54:30.560

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);
}

Huzzah! That works, thanks so much and sorry for the delay in affirming the answer. :) — Timble, Jun 06 '16 at 23:32

Koborl · Answer 2 · 2016-06-04T06:42:22.793

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.

score -1 · Answer 3 · answered Jun 04 '16 at 06:33

-1

You can try

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

answered Jun 04 '16 at 06:33

maulik sakhare

1,957
1
12
19

score -1 · Answer 4 · answered Jun 04 '16 at 06:39

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 :

Want to add Delay to a Keydown event

4 Answers4