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 bees 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?

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 bees 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?

• javascript
• jquery
• event-handling
• throttling
• debouncing

Share Improve this question Follow edited Nov 3, 2015 at 18:02 Jacob Stamm asked Nov 3, 2015 at 15:13 Jacob StammJacob Stamm 1,87333 gold badges3636 silver badges5757 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myTextbox" />

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

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