如何防止"duplicate"事件在 jQuery 中触发？

Question

我有一个连接到各种事件的事件处理程序，以确保它在各种情况下被触发。

var allChangeEvents = "focus blur select change click dblclick mousedown mouseup keypress keydown keyup";
$("#myTextbox").on(allChangeEvents, function() {
    console.log("Event fired.");
});

您会注意到，定期与<input type="text" id="myTextbox" />交互（点击、敲击、聚焦等）实际上会导致事件被多次触发。如果正在运行的代码变得非常大，那么这可能会影响性能。有没有什么方法可以防止事件被多次触发，而不必删除大量的事件类型？

Answer 1

一个选项是限制（或取消反弹）调用，这样每个时间段只会发生一次调用。一个简单的实现如下（然而，可以在这里找到更好的实现）

function debounce(fn,time){
    var timerId = null;
    return function(e){
        if(timerId)
            return;
        timerId = setTimeout(function(){
            fn(e);
            timerId = null;
        },time);
    }
}

使用

var allChangeEvents = "focus blur select change click dblclick mousedown mouseup keypress keydown keyup";
$("#myTextbox").on(allChangeEvents, debounce(function(e) {
    console.log("Event fired.");
},300)); 

正如您所看到的，这个例子会导致您的事件处理功能发生的频率不超过每300毫秒。这是限制密集型函数执行频率的好方法。

下面是的一个实际例子

var allChangeEvents = "focus blur select change click dblclick mousedown mouseup keypress keydown keyup";
$("#myTextbox").on(allChangeEvents, debounce(function(e) {
    console.log("Event fired.");
},300));
function debounce(fn,time){
    var timerId = null;
    return function(e){
        if(timerId)
            return;
        
        timerId = setTimeout(function(){
            fn(e);
            timerId = null;
        },time);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myTextbox" />

Answer 2

根据文档：http://api.jquery.com/event.stopimmediatepropagation/

如果函数以调用结束event.stopImmediatePropagation();一个人一旦被处决，其他人就不会开火。