CODEWITHSUNDEEP
javascripthtmltypescript
Hammad
Hammad

Reputation: 2137

Debounce function is not working on input events

I have taken debounce function implementation from David Walsh blog. Here is the body of that: 

function debounce(func, wait, immediate) {
    var timeout;

    return function executedFunction() {
        var context = this;
        var args = arguments;


        var later = function() {

            timeout = null;

            if (!immediate) func.apply(context, args);
        };

        var callNow = immediate && !timeout;

        clearTimeout(timeout);

        timeout = setTimeout(later, wait);

        if (callNow) func.apply(context, args);
    };
}

Now I use this debounce function as follows in html input element: 

 <input type="text" id="conversation_filter_recent_messages" oninput="debounce(Conversation.recentMessagesFilter,1000)" class="form-control" placeholder="Filter Conversations">

But as I press keys on that HTML input element nothing happens. Applying break point shows that code never comes returning function named executedFunction.

P.S: Conversation.recentMessagesFilter is my function that should run after 1 second and is defined in some other file.

Upvotes: 0

Views: 3324

Answers (3)

Mohammad Azhar
Mohammad Azhar

Reputation: 1

Debouncer = { timeout: null };
Debouncer.debounce = function(func, wait, immediate) {
    let ref = this;
    return function executedFunction() {
        var context = this;
        var args = arguments;
        var later = function() {
            ref.timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !ref.timeout;
        //Clear previous call back to inside debounce function
        clearTimeout(ref.timeout);
        console.log("Debounce: "+ref.timeout);
        ref.timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
Debouncer.debounce(function() {
   console.log("Call Ajax called");
}, 300)(this);

Upvotes: 0

Nithya Rajan
Nithya Rajan

Reputation: 4884

You should invoke the returned function from debounce function as follows: debounce(Conversation.recentMessagesFilter,1000)()

<input type="text" id="conversation_filter_recent_messages" 
 oninput="debounce(Conversation.recentMessagesFilter,1000)()" class="form-control"   
 placeholder="Filter Conversations">

Upvotes: 0

Jordan Maduro
Jordan Maduro

Reputation: 1018

tkasul is right you should use debounce once to create debounced function and add that to the input.

However, to make your code work you could do this debounce(Conversation.recentMessagesFilter.bind(this),1000)()

so

 <input type="text" id="conversation_filter_recent_messages" oninput="debounce(Conversation.recentMessagesFilter.bind(this),1000)()" class="form-control" placeholder="Filter Conversations">

The bind is to make this represent the input field in the recentMessagesFilter however, you can pass its value to the function like this:

debounce(Conversation.recentMessagesFilter,1000)(this.value)

Upvotes: 1

Related Questions