jQuery 在去抖方法執行前調用 animation

Question

我有一段代碼如下：

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

在這種情況下，去抖效果很好。

但是 - 我需要添加 animation function 它將在去抖發生之前替換“.cardButton”元素......

做這樣的事情：

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

或者像下面這樣：

   $('.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

我需要在去抖發生之前執行 animation ...

我在這里做錯了什么？

有人可以幫我嗎？

Answer 1

向同一個元素添加第二個（或更多）事件處理程序將觸發兩個事件（除非停止），因此您可以通過擁有兩個單獨的事件處理程序來創建兩個操作：

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

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