Question

我有同样的问题，比如这个人How to disable repetitive keydown in jQuery，只是因为我没有使用jQuery所以我很难将它翻译成“纯粹的”JavaScript，无论如何我设置了switch - 一些键的情况，当我按住右箭头键时，我的div正在飞行。此外，如果这不是问题，你可以告诉我当我按下右箭头键时，最简单的方法是阻止div移动，我是否必须使用clearInterval制作一个新的开关盒？

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

我很抱歉，我一直很忙，我正在测试所有可能性，到目前为止，我已经看到了一些有趣的建议。这些天我会测试他们，然后评估你在这个网站上做的事情。我必须说，社区很棒。谢谢大家的帮助:)

Answer 1

这样的事情可以解决问题;

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

要忽略密钥重复导致的关键事件，请跟踪keydown和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;
}

要停止div移动，您可以跟踪数组中的间隔ID，并在keyup事件期间清除clearInterval(intervalIds[e.keyCode])之类的间隔，但我可能会切换到使用setTimeout()并检查他们的密钥是否已关闭。这样，您就不必跟踪另一个变量。

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

这样，一旦div到达右边缘，你也会自动停止重复该功能，而不是等待用户释放箭头键。

Answer 3

跟踪最后按下的键，如果它与当前相同，则通过返回忽略它，并使用clearInterval来停止间隔

//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 4

除非已经过了足够的时间，否则我会记录时间并阻止行动，例如使用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..
}

这可以成为更通用的功能

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

如何在JavaScript中禁用重复的keydown

4 个答案: