Javascript JQuery动画在按键时变慢

我正在使用JQuery使用箭头键设置div的动画

由于某些原因，当我在当前方向重复按箭头键时，动画每次都会以拖动方式减慢

我以为

$player.stop（）

和

$player.clearQueue（）

可以解决这个问题，但显然不行。有什么建议吗

这里有一个jsfiddle：

下面是我的JS代码

$(document).ready(function () {

    var $player = $('#player'),
    $enemy1 = $('#enemy1'),
    $bg = $('#container'),
    playerW = $player.outerWidth(),
    playerH = $player.outerHeight(),
    bgW = $bg.width(),
    bgH = $bg.height(),
    playerX,
    playerY,
    enemySpeed = 1000,
    playerSpeed = 1000,
    direction,
    down = false;

    var targetSound1 = $('#targetSound1')[0];
    targetSound1.loop = true;

    function keypress(e) {

        $player.clearQueue();
        $player.stop()
        if (down) {
            return;
        }
        down = true;

        var playerLeft = $player.css('left');
        var playerTop = $player.css('top');
        var key = e.which || e.keyCode;
        if ([38, 40, 37, 39].includes(key)) {
            e.preventDefault(); // prevent defualts (scrolling)!
        }

        if (key == "37") {
            direction = 'left';
            playerLeft = 0;
        } else if (key == "38") {
            direction = 'up';
            playerTop = 0;
        } else if (key == "39") {
            direction = 'right';
            playerLeft = bgW - playerW;
        } else if (key == "40") {
            direction = 'down';
            playerTop = bgH - playerH;
        }

        $player.animate({
            left: playerLeft,
            top: playerTop
        },
            playerSpeed, 'linear');

    }

    function makeNewPosition($container) {

        // Get viewport dimensions (remove the dimension of the div)
        $container = ($container || $(window))
        var h = $container.height() - 50;
        var w = $container.width() - 50;
        var nh = Math.floor(Math.random() * h);
        var nw = Math.floor(Math.random() * w);

        return [nh, nw];
    }

    function animateDiv() {

        var $target = $($enemy1);
        var newq = makeNewPosition($target.parent());
        var oldq = $target.offset();
        var speed = enemySpeed;

        $($enemy1).animate({
            top: newq[0],
            left: newq[1]
        }, speed, 'linear', function () {
            animateDiv();
        });
    };

    $(document).on('keydown', keypress);
    $(document).on('keyup', function () {
        down = false
    });

    animateDiv();

});

---

我检查了你的小提琴。我玩了一会儿，找到了一个解决办法。小提琴在这儿

解决方案：所以我的逻辑是，如果触发事件的键是触发前一个事件的键，那么我们不应该再为#player div设置动画。只有当关键点发生变化时，我们才应该设置它的动画。这将阻止不必要的动画堆积和减慢动画。因此，我认为我们可能会跟踪最后一个动画，只有当按下的键发生变化时，我们才会允许动画发生。结果：平滑动画：）

这就是成功的代码！检查小提琴的全部代码

if(key==lastKey)
{
return;
}
else
lastKey=key;

此外，还必须从代码中删除这一行，因为它会停止player div的动画

$player.stop()

---

美好的简单有效。谢谢