Javascript CSS animationend EventListener重复启动

如果存在以下所有条件，我尝试通过触发事件来模拟碰撞检测：

向上箭头键是向下的

跳跃动画（使用cycleUp类指定）已结束

用户已向左滚动超过一定数量的像素

问题是eventListener正在快速启动。我尝试使用去盎司功能，但它只会延迟快速射击

Javascript/Jquery

$(document).keydown(function(e) {
                if (e.which == '39') {
                    $('#mainSprite').attr("class","cycleR");
                }   
                else if (e.which == '37'){
                    $('#mainSprite').attr("class","cycleL");
                }
                else if (e.which == '38'){
                    $('#mainSprite').attr("class","cycleUp");

                    document.getElementById("mainSprite").addEventListener("animationend", function(){

                        var pos = $(document).scrollLeft();

                        if( pos >= 25 ){
                                alert("Jump");
                            }

                    }, false);

                }

                else {
                    $('#mainSprite').removeClass("cycleR");
                }
            });


$(this).keyup(function(){
        $('#mainSprite').removeClass();
});

---

这个小角色会跳起来“点击”一个标记来触发一个事件。请注意，用户将需要能够滚动到页面下的多个位置，并且仍然有事件侦听器触发（也称为“与多个对象碰撞”），它的工作原理与GPS类似。如果用户已滚动到x坐标，并且动画已将角色放置在y坐标，则触发事件

在

e.which==38

的每个向下键上，您都在为

animationend

添加另一个事件侦听器。这意味着在几个键之后，您将有多个侦听器，因此您的回调将被调用多次

您必须只添加一次eventListener，或者在事件侦听器触发后删除它

---

如果使用jQuery，您可以使用安装事件处理程序的

.one（）

方法，以便在触发事件处理程序后将其自动删除。

而不是去盎司、节流？我认为不同浏览器的事件名称不同。这可能就是问题所在：

webkitAnimationEnd mozanimationnd MSAnimationEnd oanimationend animationend

不幸的是，这并没有解决我的问题。用户需要能够向下滚动到页面的多个位置，并且仍然可以激活事件侦听器（也称为“与多个对象碰撞”）。此解决方案在初次点火后将其完全移除。另外，当我尝试removeEventListener时，该函数继续快速运行。@MariahWeathersby-你的评论没有意义。您的每个键都将添加一个新的事件侦听器。这是错误的，因为它们将不断累积，直到您安装了数百个，所以每个事件都会收到数百个事件处理程序回调。没有办法解决你的问题。您没有显示启动动画的代码，因此我觉得您只显示了问题的一半。当我试图查看您的实际页面时，

addEventListener（）

甚至不在页面中的代码中，因此我无法调试任何内容。嘿，您添加事件侦听器的想法是对的。这不是.one（）解决方案，而是您的另一个建议。我将很快更新我的实时站点并重新发布。我是一个相当新的开发人员，所以我一开始不理解你的意思，但经过一些尝试和错误，它成功了。