jQuery call animation before debounce method executes

I have a piece of code like following:

$('.cardButton').click($.debounce(1500, function () {
    console.log("OK");
}));

The debounce in this case works just perfectly..

However – I need to add animation function which will replace “.cardButton” element before the debounce occurs…

Doing something like this:

 $('.cardButton').click($.debounce(1500, function () {
        StartAnimationLoader();
        console.log("OK");
    }));
// In this  case - animation starts as  soon as console writes out "OK" ... 

Or like following:

   $('.cardButton').click(function(){
       StartAnimationLoader();
       $.debounce(1500, function () {
           
            console.log("OK");
        })
});

// When I execute code like this - there is nothing written in the console... - thus this method doesn't works

I need to execute animation before debounce occurs …

What am I doing wrong here?

Can someone help me out ?

Answer

Adding a 2nd (or more) event handler to the same element will fire both events (unless stopped) so you can create two actions by having two separate event handlers:

// existing debounce fire only after user stops clicking 
$('.cardButton').click($.debounce... ); 

// additional event will fire on every click
$(".cardButton").click(function() { StartAnimationloader() });

Leave a Reply

Your email address will not be published. Required fields are marked *