Question

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

向上箭头键已关闭
跳转动画（使用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();
});

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

Answer 1

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

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

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

CSS animationend EventListener重复射击

1 个答案: