按键事件延迟两秒

Question

我写了一些触发keyup和keydown事件的jQuery，但由于某种原因，我有两秒的轻微延迟，我该如何解决？我将如何使图像保持在画布

链接到demo

jQuery的：

$(function(){
    // Put player on map
    var player = '<div id="player" class="img-responsive"></div>';
    $("#map").append(player);
    // Set layout for player controlls
    $(document).keyup(function (e){
        $("#player.img-responsive").removeClass("run");
    });
    $(document).keydown(function (e) {
        // Get the position of the character
        var position = $("#player").position();
        $("#player.img-responsive").addClass("run");
        switch (e.keyCode)
        {
            case 37:  // Arrow Left
                $("#player").css(
                        'left'      , position.left - 10 + 'px'
                        );
                break;

            case 38:  // Arrow Up
                $("#player").css(
                        'top'       , position.top - 10 + 'px'
                        );
                break;

            case 39:  // Arrow Right
                $("#player").css(
                        'left'      , position.left + 10 + 'px'
                        );
                break;

            case 40:  // Arrow Down
                $("#player").css(
                        'top'       , position.top + 10 + 'px'
                        );
                break;

        } // End Switch
    }); // End KeyDown function
}); // End Main function

CSS：

/* Top Score
++++++++++++++++++++++++++++++++++++++++*/
span.tot_score{
    position: relative;
    top: 1px;
}

/* Player Character
++++++++++++++++++++++++++++++++++++++++*/
#player {
    position: absolute;
    background: url(../img/players/player2.png) no-repeat;
    width: 50px;
    height: 63px;
    bottom: 0;
    margin: 0;
    padding: 0;
}
#player.img-responsive.run{
    background: url(../img/players/run.gif) no-repeat;
    width: 75px;
}