当触发 keyup 时，Javascript 会忘记其他 keydown

Question

我关注了this question/answer创建一个多按键检测器。它按预期工作:按下D，方 block 向右移动，然后按下S，同时按下D，方 block 按 Angular 移动。到目前为止，一切都很好。但是，如果您同时按下 D 和 S 并且松开 S，方 block 将停止移动。预期的行为是它不断向右移动，因为您仍在按 D。

这是a jsfiddle 和 demo I'm making (我的网站)。

那么，为什么 .keyup() 使其他 .keydown() 事件无效？这是有问题的 jQuery 代码:

// Check if it's a function
function isFunction(functionToCheck) {
    var getType = {};
    return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
}

// Store the keys pressed and callback for each key
var keys = {};
var keycalls = {};

// Loop and call all the needed callbacks
function run_keys() {
    $.each(keys, function (index, value) {
        if (value == true) {
            console.log(keys);
            var fun = keycalls[index];
            if (isFunction(fun))
                fun();
        }
    });
}
// Store a key
$(document).keydown(function (e) {
    keys[e.which] = true;
    run_keys();
});
// Delete a key
$(document).keyup(function (e) {
    delete keys[e.which];
    run_keys();
});
// Assign a callback to a key
keyboard = function (key, callback) {
    console.log(callback);
    keycalls[key.toUpperCase().charCodeAt()] = callback;
}
// Assign keys
// Assign w to up action
keyboard("w", function () {
    $(".keyboard").animate({
        'top': "-=5px"
    }, 0);
});
keyboard("a", function () {
    $(".keyboard").animate({
        'left': "-=5px"
    }, 0);
});
keyboard("s", function () {
    $(".keyboard").animate({
        'top': "+=5px"
    }, 0);
});
keyboard("d", function () {
    $(".keyboard").animate({
        'left': "+=5px"
    }, 0);
});

免责声明:这只是为了娱乐和学习，而不是为了拥有游戏引擎。我知道已经有很多好的可用的。

更新

我想到的解决方案之一是创建一个独立的循环来调用 run_keys()，但如果可能的话我想避免这种情况。 It works ，但是我仍然对这个问题感兴趣。

Answer 1

我相信您的问题来自于 keyup 之后 keypress 事件的结束，而不是任何“出错”，请使用 setTimout> 循环而不是在每个处理程序末尾调用 run_keys。

<小时/>

这是一个 setTimeout 循环的示例

(function looper() {
    run_keys();
    window.setTimeout(looper, 100);
}());

这有点像setInterval，但延迟在调用之后开始，这意味着您不会像那样得到(相同类型的)级联错误>设置间隔。