jQuery实现div跳跃效果 禁止动画叠加触发方案咨询

核心思路是通过状态锁控制跳跃动作的触发时机，同时移除会中断动画的stop()调用：

• 新增全局状态变量isJumping，初始值为false，用于标记当前是否正在执行跳跃动画
• 移除原来全局调用的$(".box").stop(true)代码，避免中断正在执行的动画
• 按下上方向键（keyCode 38）时，先判断isJumping是否为false，只有未处于跳跃状态时才执行跳跃逻辑
• 跳跃动画启动时将isJumping设为true，等下落动画完全执行完毕、box回到初始位置后，再将isJumping重置为false，允许下一次跳跃触发

修改后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // 新增跳跃状态锁
    let isJumping = false;
    $(document).keydown(function(e){
        if (e.which == 37) { 
            if(parseInt($(".box").position().left)>49){
                $(".box").css("left", parseInt($(".box").position().left)-50);
            }
            return false;
        }
        if (e.which == 38) { 
            // 只有未处于跳跃状态时才允许触发新跳跃
            if(!isJumping){
                // 标记为正在跳跃
                isJumping = true;
                $(".box").animate({ 
                    bottom: "+=50px",
                },function(){
                    // 下落动画结束后重置状态锁
                    $(".box").animate({bottom: "-=50px"}, function(){
                        isJumping = false;
                    });
                });
            }
            return false;
        }
        if (e.which == 39) { 
            // 可在此补充右移逻辑
            return false;
        }
        if (e.which == 40) { 
            // 可在此补充下蹲/下移逻辑
            return false;
        }
    });
});
</script>
<div style="width:500;margin:0px auto;">
    <div class="main" style="width:500px;height:500px;border:1px solid #ccc;position:relative;">
        <div class="box" style="border:1px solid #ccc;width:50px;height:50px;box-sizing:border-box;position:absolute;left:100px;bottom:0px;"></div>
    </div>
</div>

改动说明：

1. 移除了全局的stop()调用，不会再中断正在运行的动画
2. 状态锁isJumping会在跳跃全程阻断新的跳跃请求，直到box完全落回初始位置才会解锁
3. 状态重置逻辑放在了第二段下落动画的回调函数中，确保只有动画完全结束才允许下一次跳跃

内容的提问来源于stack exchange，提问作者Exc