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

一种选择是限制（或去抖动）呼叫，这样您每个时间段只能进行一次呼叫。一个简单的实现如下（但是，可以找到更好的实现here）

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毫秒。这是限制强化函数执行频率的好方法。

下面是一个实际操作的实例

＆＃13;

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);
    }
}

＆＃13;

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

＆＃13;

Answer 2

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

如果您的功能以呼叫结束 event.stopImmediatePropagation(); 一旦被执行，其他人就不会开枪。

如何防止在jQuery中触发“重复”事件？

2 个答案: