CODEWITHSUNDEEP
javascriptdebouncing
adam0101
adam0101

Reputation: 30995

Debounce actions from multiple events

How do I debounce an action that can be kicked off from multiple events? Here's an example just to demonstrate the behavior: http://jsfiddle.net/eXart/2/

<input type="text" id="t">

<div id="x"></div>

<script>
function debounce(fn, delay) {
    var timer = null;
    return function () {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    };
}

function doStuff(){
    document.getElementById("x").innerHTML +="<br>stuff";
}

    var t = document.getElementById("t");
    t.onchange = debounce(function(){ doStuff() }, 500);
    t.onblur = debounce(function(){ doStuff() }, 500);
</script>

If you enter some text in the textbox and click out of it, you see "stuff" appears twice instead of once because each event is getting it's own debounce instance. How do you share debounce instances across events?

Upvotes: 5

Views: 3214

Answers (1)

tobi
tobi

Reputation: 789

You must attach the same debounced handler, like this

var debouncedFunc = debounce(function(){ doStuff(); }, 500);

t.onchange = debouncedFunc;
t.onblur = debouncedFunc;

if you want to share the timer.

But I think you should only use one of the onchange or onblur events if you want to avoid duplicate invocations once the input loses focus.

Upvotes: 5

Related Questions