按住 keydown 时需要阻止我的超时堆叠答案

【问题标题】：Need to stop my timeouts from stacking when holding keydown按住 keydown 时需要阻止我的超时堆叠
【发布时间】：2013-04-28 06:47:04
【问题描述】：

我正在玩 Canvas，我的小家伙在画布上的“动画”出现问题，当我按住左键时，他应该在页面上飞驰时播放他的小动画，但是在按住按钮时超时会叠加，所以他的动画变得很糟糕。我怎样才能控制setTimeouts，让他看起来不那么傻，谢谢！

与运动有关的代码：

   var playerMove = function(direction) {

        if (direction === 'left') {
            updatePlayer(0, 130, 100, 100, 100, 100, 100);
            setTimeout(function() {
                updatePlayer(100, 130, 100, 100, 100, 100);
            }, 100);
            setTimeout(function() {
                updatePlayer(180, 130, 100, 100, 100, 100);
            }, 200);
            setTimeout(function() {
                updatePlayer(100, 130, 100, 100, 100, 100);
            }, 500);
            setTimeout(function() {
                updatePlayer(0, 130, 100, 100, 100, 100, 100);
            }, 650);
        } else if (direction === 'right') {
                updatePlayer(0, 230, 100, 100, 100, 100, 100);
            setTimeout(function() {
                updatePlayer(100, 230, 100, 100, 100, 100);
            }, 100);
            setTimeout(function() {
                updatePlayer(180, 230, 100, 100, 100, 100);
            }, 200);
            setTimeout(function() {
                updatePlayer(100, 230, 100, 100, 100, 100);
            }, 500);
            setTimeout(function() {
                updatePlayer(0, 230, 100, 100, 100, 100, 100);
            }, 650);
        }
    };

               function movePlayer(e) {
            if (e.which === 37) {
                active = true;
                playerMove('left');
                player.destX -= 2;
            } else if (e.which === 39) {
                active = true;
                playerMove('right');
                player.destX += 2;
            }
    }

    document.addEventListener('keydown', function(e) {
            movePlayer(e);
    });

Demo Source Code

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

您可以在上次超时时将 active 设置为 false，并且只有在 !active... 时才调用 move()...

【讨论】：

【解决方案2】：

将您的超时存储在一个变量中，并在每次移动时使用 clearTimeout。在这种情况下，更好的用法是使用单个间隔，并在 keyup 事件上清除间隔。

[编辑]

以间隔和玩家动作为例，只需要控制动画时间。

var playerMovementInterval = null;

function movePlayerLeft () {
     var actions = [
         [0, 130, 100, 100, 100, 100, 100],
         [100, 130, 100, 100, 100, 100],
         [180, 130, 100, 100, 100, 100],
         [100, 130, 100, 100, 100, 100],
         [0, 130, 100, 100, 100, 100, 100]
     ];

    var index = 0;
    clearInterval(playerMovementInterval);
    playerMovementInterval = setInterval(function() {
        updatePlayer.apply(window, actions[index]);
        index++;
        if (index > actions.length-1) clearInterval(playerMovementInterval);
    }, 200);                
}

var playerMove = function(direction) {

    if (direction === 'left') {
        movePlayerLeft();
    } else if (direction === 'right') {
.....

【讨论】：

我怎样才能使用一个间隔来处理 3 个不同的动画？
例如，以相同的间隔进行单独的玩家动作。