How to prevent calling of en event handler twice on fast clicks?

Question

There is a button and when user clicks on button, some data is saved to back-end. Issue is when user clicks on button very quickly, event handler is getting executed multiple times. This is the code ``` var x = 1; $('#button').click(function() { // Do something // Save some data on network x++; console.log(x); }); ``` I want this handler to get executed when user clicks on button just once. Even In case of double or tripple click, this should get executed only once. I just want to avoid quick clicks, this handler can get executed again ofcourse I have multiple solutions in my mind like Define a global variable like `IS_BUTTON_HANDLER_WORKING = false` and when you enter the handler set it to true and in the end set it to false again. And check if it is true just return from the function. Detach the handler in the beginning and reattach in the end. Consider you have 25 buttons in your application. What should be the best approach to implement this. Take a look at this Fiddle Solution ``…

Accepted Answer

David Walsh has a great solution.

```
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, 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);
    };
};
```

How to prevent calling of en event handler twice on fast clicks?

Solution

Problem