如何使用jQuery阻止keypress事件在DOM中累积，避免动画重复执行？

问题原因 #

你之前的尝试失效主要有两个核心问题：

• 加class标记的方案中，jQuery的animate()是异步执行方法，调用后不会阻塞后续代码运行，你在调用animate后立刻执行removeClass，标记会在动画开始后瞬间被移除，判断逻辑完全失效。
• event.stopPropagation()的作用是阻止事件冒泡到父级DOM元素，和限制事件重复触发、清空动画队列没有任何关联，因此无法解决问题。

解决方案 #

方案1：使用jQuery内置:animated选择器判断（最简方案） #

jQuery提供了内置的:animated伪类选择器，可直接匹配当前正在执行动画的元素，直接判断即可：

$('body').keypress(function(e){
   if(e.keyCode == 32){
       // 仅当角色未处于动画状态时才执行新动画
       if(!$(".character").is(":animated")) {
           $(".character").animate({top: '-=300px'}, 500);
           $(".character").animate({top: '+=300px'}, 500);
       }
   }
});

方案2：使用class状态标记（兼容自定义状态管理需求） #

如果需要用自定义class做状态标记，只需要把移除class的操作放到最后一个动画的完成回调函数中，保证动画完全结束后再释放状态：

$('body').keypress(function(e){
   if(e.keyCode == 32){
       if(!$(".character").hasClass("character_jumping")) {
           $(".character").addClass("character_jumping");
           $(".character").animate({top: '-=300px'}, 500);
           // 最后一段动画结束后，在回调中移除状态标记
           $(".character").animate({top: '+=300px'}, 500, function(){
               $(this).removeClass("character_jumping");
           });
       }
   }
});

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