我有一个事件处理程序连接到各种事件,以确保它在各种情况下被触发。
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" />
互动(点击、点击、聚焦等)实际上会导致事件被多次触发。如果正在运行的代码变得非常大,那么这可能会损害性能。有什么方法可以防止事件被多次触发,而不必删除大量事件类型?
最佳答案
一种选择是限制(或反跳)调用,以便每个时间段内仅发生一次调用。一个简单的实现如下(但是,可以找到更好的实现 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 毫秒。这是限制密集函数执行频率的好方法。
下面是一个实际的例子
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" />
关于javascript - 如何防止 jQuery 中触发 "duplicate"事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33502613/