javascript - CSS animationend EventListener 反复触发

Question

如果满足以下所有条件，我将尝试通过触发事件来模拟碰撞检测:

1. 向上箭头键向下
2. 跳跃动画(分配给cycleUp类)已经结束
3. 用户已经离开滚动了一定数量的像素

问题是 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();
});

Here is a link to the site where I am trying to implement the code.小 Angular 色会跳起来并“击中”标记以触发事件。请注意，用户将需要能够滚动到页面下方的多个位置，并且仍然有事件监听器触发(也就是与多个对象“碰撞”)。它基本上像 GPS 一样工作。如果用户已滚动到 x 坐标，并且动画已将 Angular 色放置在 y 坐标处，则触发一个事件。

Answer 1

在 e.which == 38 的每个按键上，您都在为 animationend 添加另一个事件监听器。这意味着在几个键之后，您将有多个监听器，因此您的回调将被调用多次。

您必须只添加一次 eventListener，或者您必须在事件监听器触发后将其删除。

如果使用 jQuery，您可以使用安装事件处理程序的 .one() 方法，以便它在触发后自动删除。