How to disable retype in JavaScript

Question

I have the same problem as this guy. How to disable re-keydown in jQuery , it’s just that I don’t use jQuery, so it’s hard for me to translate this “pure” JavaScript, anyway I set switch -case of some keys, and when I click and hold the right arrow key, my div is flying. Also, if this is not a problem, can you tell me what would be the easiest way to stop the div from moving, when I let the right arrow key, I need to make a new switch case using clearInterval or?

 switch (keyPressed) { case 39: setInterval(movFwr, 50); break; } function movFwr() { if (currPos == 1000) { a.style.left = 1000 + "px"; } else currPos += 10; a.style.left = trenutnaPozicija + "px"; } 

Sorry guys, I was a little busy, I am testing all the features and still have seen some interesting suggestions. I will check them all these days, and then the speed of what you do on this site. Great community I have to say. Thank you all for your help :)

Answer 1

Something like this should do the trick;

 var down = false; document.addEventListener('keydown', function () { if(down) return; down = true; // your magic code here }, false); document.addEventListener('keyup', function () { down = false; }, false); 

Answer 2

Track the last key pressed, if it is the same as the current one, ignore it by returning and use clearInterval to stop the intervals

 //global variables var lastKey = 0; var moveTimer = []; //in keydown function if(lastKey == keyPressed) return; switch (keyPressed) { case 39: lastKey = keyPressed moveTimer[keyPressed] = setInterval(movFwr, 50); break; } //in a onkey up function lastKey = null; if(typeof(moveTimer[keyPressed]) != "undefined") clearInterval(moveTimer[keyPressed]); 

Answer 3

I would record the time and prevent the action if enough time has passed, for example, using Date.now

 var lastPress = 0; function myListener() { var now = Date.now(); if (now - lastPress < 1000) return; // less than a second ago, stop lastPress = now; // continue.. } 

---

This can be done in a more general function.

 function restrict(func, minDuration) { var lastPress = 0; return function () { var now = Date.now(); if (now - lastPress < minDuration) return; // or `throw` lastPress = now; return func.apply(this, arguments); }; } // now, for example foo = function () {console.log('foo');}; bar = restrict(foo, 200); // only permit up to once every 200ms bar(); // logs "foo" bar(); // void as less than 200ms passed 

Answer 4

To ignore key events caused by key repeats, keep track of which keys were pressed during keydown and keyup .

 var pressedKeys = []; function keydownHandler(e) { var isRepeating = !!pressedKeys[e.keyCode]; pressedKeys[e.keyCode] = true; switch (e.keyCode) { case !isRepeating && 39: // do something when the right arrow key is pressed, but not repeating break; } } function keyupHandler(e) { pressedkeys[e.keyCode] = false; } 

To stop the div from moving, you can track the interval identifiers in the array and clear the interval during the keyup event with something like clearInterval(intervalIds[e.keyCode]) , but I would probably switch to using setTimeout() and checking are closed whether they are the key. This way you do not need to track another variable.

 var pressedKeys = []; function keydownHandler(e) { var isRepeating = !!pressedKeys[e.keyCode]; pressedKeys[e.keyCode] = true; switch (e.keyCode) { case !isRepeating && 39: movFwr(); break; } } function keyupHandler(e) { pressedkeys[e.keyCode] = false; } function movFwr() { if (pressedKeys[39] && currPos < 1000) { currPos += 10; a.style.left = currPos + "px"; setTimeout(movFwr, 50); } } 

This way, you will also automatically stop repeating the function as soon as the div reaches the right edge, instead of waiting for the user to release the arrow key.