Javascript 需要在按住键时阻止超时堆积

我在玩画布，我的小家伙在画布上的“动画”有问题，当我按住左键时，他应该在页面上快速移动时播放他的小动画，但按住按钮时超时会叠加，所以他的动画会变得很混乱。我怎样才能控制

设置超时

使他看起来不那么愚蠢，谢谢

与移动有关的代码：

   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);
    });

---

将超时存储在变量中，并在每次移动时使用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') {
.....

---

您可以在最后一次超时时将active设置为false，并仅在以下情况下调用move（）！活动…

如何使用一个时间间隔制作3个不同的动画？例如，使用相同的时间间隔制作不同的玩家动作。