jQuery：在某些操作中绑定会导致多次执行

Question

好的，我只是要求解除特定按键事件的绑定。我现在用命名空间事件解决了这个问题。但我遇到了另一个问题...下面的函数在 animate() 显示 div 后绑定按键事件。它工作得很好，但按键事件似乎计算了次数，函数被执行...在我的例子中，当单击链接时 myFnc() 执行...所以当我单击链接时keypress.f 事件被触发一次...但是，当在我按下该键之前多次单击该链接时，虽然我只按下该键一次，但 keypress 事件也执行了不止一次time...所以 fadeToggle() 将执行 5 次一次按键，当该功能通过五次点击之前执行了 5 次时……有人明白我的意思并可以帮助我吗？

function myFnc() {
        $('#somediv').animate({    
            height: 'toggle'              
        }, 600, function() { 

            $(document).bind('keypress.f', function(event) {

                if($('#secret').is(':visible')) {  

                    if ( event.which == 102 ) {
                        $('.content-2').fadeToggle();
                        $('.content-284').fadeToggle();
                    }
                }
                else {                        
                    $(document).unbind('keypress.f');                        
                }
            });

        });

}

Answer 1

你可以用类似的方法解决这个问题

var bound_keypress_f = false;

function myFnc() {
        $('#somediv').animate({    
            height: 'toggle'              
        }, 600, function() { 
            if (!bound_keypress_f) {
                $(document).bind('keypress.f', function(event) {

                    if($('#secret').is(':visible')) {  
                        if ( event.which == 102 ) {
                            $('.content-2').fadeToggle();
                            $('.content-284').fadeToggle();
                        }

                        bound_keypress_f = true;
                    }
                    else {                        
                        $(document).unbind('keypress.f');                        

                        bound_keypress_f = false;
                    }
                });
            }
        });
}

Answer 2

您正在绑定 5 个 keypress.f 事件（每次单击链接都会绑定一个事件）。您可以通过几种不同的方式解决此问题：

1) 在绑定 keypress.f 事件之前取消绑定所有 keypress.f 事件。

2）页面加载时绑定keypress.f事件，并在函数开头添加if(flag)。每当单击链接时，将标志设置为 true。当您不希望 keypress.f 触发该函数时，将该标志设置为 false。

Answer 3

使用 .is() 方法 和 :animated 选择器 仅在当前未进行动画时应用动画..（如果问题是动画播放时多次点击进度）

function myFnc() {
    var $somediv = $('#somediv');
    if (!$somediv.is(':animated')) {
        $somediv.animate({
            height: 'toggle'
        }, 600, function() {

            $(document).bind('keypress.f', function(event) {

                if ($('#secret').is(':visible')) {

                    if (event.which == 102) {
                        $('.content-2').fadeToggle();
                        $('.content-284').fadeToggle();
                    }
                }
                else {
                    $(document).unbind('keypress.f');
                }
            });

        });
    }
}

---

另一种解决方案是在绑定新按键之前始终解除按键绑定。

$(document).unbind('keypress.f');
$(document).bind('keypress.f', function(event) {...});

这样它就永远只是一个。