javascriptjquerydebouncing

Debounce function in jQuery


I'm attempting to debounce a button's input using the jquery debouncing library by Ben Alman. http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/

Currently this is the code that I have.

function foo() {
    console.log("It works!")
};

$(".my-btn").click(function() {
    $.debounce(250, foo);
});

The problem is that when I click the button, the function never executes. I'm not sure if I've misunderstood something but as far as I can tell, my code matches the example.


Solution

  • I ran into the same issue. The problem is happening because the debounce function returns a new function which isn't being called anywhere.

    To fix this, you will have to pass in the debouncing function as a parameter to the jquery click event. Here is the code that you should have.

    $(".my-btn").click($.debounce(250, function(e) {
      console.log("It works!");
    }));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
    <button class="my-btn">Click me!</button>