Javascript 头像移动不平稳

使用左右箭头键，我应该能够左右移动化身。 然而，它的运行并不平稳，因为它的移动就像：当你按住箭头键时，前进-停止-前进-停止

参见小提琴：

html:

jquery：

var allowedToWalk = false, allowedToWalkTime = true;
var percentage = 1;
var maxWidth = 1000;
    $(window).keydown(function(e) {

        if(e.which == 39) {
            //move to right
            allowedToWalk = true;
            avatarMoveRight();

        }
        if(e.which == 37) {
            //move to left
            allowedToWalk = true;
            avatarMoveLeft();

        }
    }).keyup(function() {
        allowedToWalk = false;
    });

    function avatarMoveRight() {
        if(allowedToWalk != false && allowedToWalkTime != false) {
            var pos = $("#avtr").css('left');
            pos = pos.replace('px', '');
            pos = pos - 0;
            if((pos - 40) < (percentage * maxWidth)) {
                allowedToWalkTime = false;
                $("#avtr").animate({left: '+=40'}, 150);
                setTimeout(function() {allowedToWalkTime = true;},150);
            }

        }
    }

    function avatarMoveLeft() {
        if(allowedToWalk != false && allowedToWalkTime != false) {
            var pos = $("#avtr").css('left');
            pos = pos.replace('px', '');
            pos = pos - 0;
            if((pos - 4) > 0) {
                allowedToWalkTime = false;
                $("#avtr").animate({left: '-=40'}, 150);
                setTimeout(function() {allowedToWalkTime = true;},150);
            }


        }
    }

var allowedToWalk=false，allowedToWalkTime=true；
风险值百分比=1；
var maxWidth=1000；
$（窗口）.keydown（函数（e）{
如果（e.which==39）{
//向右移动
allowedToWalk=true；
虚拟现实（）；
}
如果（e.which==37）{
//向左移动
allowedToWalk=true；
avatarMoveLeft（）；
}
}).keyup（函数（）{
allowedToWalk=false；
});
函数avatarVeright（）{
if（allowedToWalk！=false&&allowedToWalkTime！=false）{
var pos=$（“#avtr”）.css（'left'）；
位置=位置替换（'px'，''）；
pos=pos-0；
如果（（位置-40）<（百分比*最大宽度））{
allowedToWalkTime=false；
$（“#avtr”）.animate（{左：'+=40'}，150）；
setTimeout（函数（）{allowedToWalkTime=true；}，150）；
}
}
}
函数avatarMoveLeft（）{
if（allowedToWalk！=false&&allowedToWalkTime！=false）{
var pos=$（“#avtr”）.css（'left'）；
位置=位置替换（'px'，''）；
pos=pos-0；
如果（（位置-4）>0）{
allowedToWalkTime=false；
$（“#avtr”）.animate（{left:'-=40'}，150）；
setTimeout（函数（）{allowedToWalkTime=true；}，150）；
}
}
}

如何在按住箭头键时使其平稳运行

@adam A的解决方案

---

这是一个更新的代码，具有较低的值和移动之间的等待时间，这使它的动画更加流畅。不过，我建议你去看看Phaser的GSAP动画库，看看有没有真正高级的东西

var allowedToWalk = false, allowedToWalkTime = true;
var percentage = 1;
var maxWidth = 1000;
    $(window).keydown(function(e) {

        if(e.which == 39) {
            //move to right
            allowedToWalk = true;
            avatarMoveRight();

        }
        if(e.which == 37) {
            //move to left
            allowedToWalk = true;
            avatarMoveLeft();

        }
    }).keyup(function() {
        allowedToWalk = false;
    });

    function avatarMoveRight() {
        if(allowedToWalk != false && allowedToWalkTime != false) {
            var pos = $("#avtr").css('left');
            pos = pos.replace('px', '');
            pos = pos - 0;
            if((pos - 40) < (percentage * maxWidth)) {
                allowedToWalkTime = false;
                $("#avtr").animate({left: '+=5'}, 5);
                setTimeout(function() {allowedToWalkTime = true;},5);
            }

        }
    }

    function avatarMoveLeft() {
        if(allowedToWalk != false && allowedToWalkTime != false) {
            var pos = $("#avtr").css('left');
            pos = pos.replace('px', '');
            pos = pos - 0;
            if((pos - 4) > 0) {
                allowedToWalkTime = false;
                $("#avtr").animate({left: '-=5'}, 5);
                setTimeout(function() {allowedToWalkTime = true;},5);
            }


        }
    }

var allowedToWalk=false，allowedToWalkTime=true；
风险值百分比=1；
var maxWidth=1000；
$（窗口）.keydown（函数（e）{
如果（e.which==39）{
//向右移动
allowedToWalk=true；
虚拟现实（）；
}
如果（e.which==37）{
//向左移动
allowedToWalk=true；
avatarMoveLeft（）；
}
}).keyup（函数（）{
allowedToWalk=false；
});
函数avatarVeright（）{
if（allowedToWalk！=false&&allowedToWalkTime！=false）{
var pos=$（“#avtr”）.css（'left'）；
位置=位置替换（'px'，''）；
pos=pos-0；
如果（（位置-40）<（百分比*最大宽度））{
allowedToWalkTime=false；
$（“#avtr”）.animate（{左：'+=5'}，5）；
setTimeout（函数（）{allowedToWalkTime=true；}，5）；
}
}
}
函数avatarMoveLeft（）{
if（allowedToWalk！=false&&allowedToWalkTime！=false）{
var pos=$（“#avtr”）.css（'left'）；
位置=位置替换（'px'，''）；
pos=pos-0；
如果（（位置-4）>0）{
allowedToWalkTime=false；
$（“#avtr”）.animate（{left:'-=5'}，5）；
setTimeout（函数（）{allowedToWalkTime=true；}，5）；
}
}
}

如果一次跳40个像素，可以尝试将其降低到较小的数值。

var allowedToWalk = false, allowedToWalkTime = true;
var percentage = 1;
var maxWidth = 1000;
    $(window).keydown(function(e) {

        if(e.which == 39) {
            //move to right
            allowedToWalk = true;
            avatarMoveRight();

        }
        if(e.which == 37) {
            //move to left
            allowedToWalk = true;
            avatarMoveLeft();

        }
    }).keyup(function() {
        allowedToWalk = false;
    });

    function avatarMoveRight() {
        if(allowedToWalk != false && allowedToWalkTime != false) {
            var pos = $("#avtr").css('left');
            pos = pos.replace('px', '');
            pos = pos - 0;
            if((pos - 40) < (percentage * maxWidth)) {
                allowedToWalkTime = false;
                $("#avtr").animate({left: '+=40'}, 150);
                setTimeout(function() {allowedToWalkTime = true;},150);
            }

        }
    }

    function avatarMoveLeft() {
        if(allowedToWalk != false && allowedToWalkTime != false) {
            var pos = $("#avtr").css('left');
            pos = pos.replace('px', '');
            pos = pos - 0;
            if((pos - 4) > 0) {
                allowedToWalkTime = false;
                $("#avtr").animate({left: '-=40'}, 150);
                setTimeout(function() {allowedToWalkTime = true;},150);
            }


        }
    }

var allowedToWalk = false, allowedToWalkTime = true;
var percentage = 1;
var maxWidth = 1000;
    $(window).keydown(function(e) {

        if(e.which == 39) {
            //move to right
            allowedToWalk = true;
            avatarMoveRight();

        }
        if(e.which == 37) {
            //move to left
            allowedToWalk = true;
            avatarMoveLeft();

        }
    }).keyup(function() {
        allowedToWalk = false;
    });

    function avatarMoveRight() {
        if(allowedToWalk != false && allowedToWalkTime != false) {
            var pos = $("#avtr").css('left');
            pos = pos.replace('px', '');
            pos = pos - 0;
            if((pos - 40) < (percentage * maxWidth)) {
                allowedToWalkTime = false;
                $("#avtr").animate({left: '+=5'}, 5);
                setTimeout(function() {allowedToWalkTime = true;},5);
            }

        }
    }

    function avatarMoveLeft() {
        if(allowedToWalk != false && allowedToWalkTime != false) {
            var pos = $("#avtr").css('left');
            pos = pos.replace('px', '');
            pos = pos - 0;
            if((pos - 4) > 0) {
                allowedToWalkTime = false;
                $("#avtr").animate({left: '-=5'}, 5);
                setTimeout(function() {allowedToWalkTime = true;},5);
            }


        }
    }