JQuery 按键时动画变慢

Question

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

出于某种原因，当我针对当前方向重复按箭头键时，动画每次都会显着变慢。

我以为 $player.stop() 和 $player.clearQueue() 会解决这个问题，但显然不是。有什么建议吗？

这里有一个 jsfiddle：https://jsfiddle.net/qb484yp2/

我的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();

});

Answer 1

我检查了你的 fiddle。我玩了一下，找到了解决方案。这是 fiddle。 https://jsfiddle.net/qb484yp2/3/

解决方案：所以我的逻辑是，如果触发事件的键是触发前一个事件的键，我们不应该再为#player div 设置动画。只有当键改变时，我们才应该为它设置动画。这将阻止不必要的动画堆积和减慢动画速度。所以我想我们可能会跟踪最后一个动画，只有当按下的键发生变化时，我们才会允许动画发生。结果：动画流畅 :)

这就是成功的代码！查看 fiddle 以获得完整代码

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

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

$player.stop()

JQuery 按键时动画变慢

JQuery Animation Slowing Down on KeyPress

html

javascript

css

jquery

animation