How do I prevent “duplicate” events from firing in jQuery?

I have an event handler wired to a variety of events to ensure that it gets fired under a variety of circumstances.

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

You'll notice that interacting regularly with <input type="text" id="myTextbox" /> (clicking, tapping, focusing, etc.) will actually cause the event to be fired multiple times. If the code being run becomes very large, then this could hurt performance. Is there any way for me to prevent the event from being fired so many times without having to remove a ton of my event types?

Answers:

Answer

One option is to throttle (or debounce) the calls, so that you only get one call occurring per time period. A simple implementation would be as below (however, a better implementation can be found here)

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

        timerId = setTimeout(function(){
            fn(e);
            timerId = null;
        },time);
    }
}

And usage would be

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

As you can see, this example would cause your event handling function to occur no more often than every 300ms. This is a good way to limit how often intensive functions are executed.

Below is a live example of this in action

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

According to the documentation: http://api.jquery.com/event.stopimmediatepropagation/

if your functions ends with a call to event.stopImmediatePropagation(); as soon as one is executed the others wont fire.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.