jQuery：讓動畫僅在完全完成后重復

Question

編輯：多虧了 mplungian，我現在知道了去抖動，尤其是油門，這似乎是解決我的問題的一個很好的方法。 但我還不知道如何用 jQuery “動畫”來實現這個。

我有這個腳本：

$(document).on('click','#right',function(){
    if($(this).hasClass('ready')){
        $(this).removeClass('ready');
        $('#slider').animate(
            {'margin-left': '-=200px'},
            { duration:1100,easing:'easeOutElastic',queue: false,complete:function()
                {
                    $('#right').addClass('ready');
                }
            }
        )
        // ...
        sliderPosition++;   
    }

})

因此，這是在單擊按鈕時觸發的 slider。 因為有一個重要的 animation 必須在用戶再次點擊之前完成（否則 slider 的寬度很快就會亂七八糟），我使用了一個“准備好的”class 來阻止用戶點擊，直到之前的 animation 完成。

從技術上講，它工作得很好，但它“感覺”不對，slider 看起來“響應”不夠，因為快速點擊者只能看到 slider 每次點擊都會移動。

但是，如果我擺脫“.ready”條件，那么 slider 很快就會搞砸，因為每個 animation 都可以在前一個完成之前觸發。

那么，有沒有辦法讓腳本考慮到每次點擊，但只是將它們不同，直到相同 animation 的所有先前迭代都完成？

謝謝。

Answer 1

嘗試添加.stop

$('#slider').stop().animate(

像這樣

$(document).on('click','#right',function(){
    if($(this).hasClass('ready')){
        $(this).removeClass('ready');
        $('#slider').stop().animate(
            {'margin-left': '-=200px'},
            { duration:1100,easing:'easeOutElastic',queue: false,complete:function()
                {
                    $('#right').addClass('ready');
                }
            }
        )
        // ...
        sliderPosition++;   
    }
})

Answer 2

已經使用油門解決了：

let timeout;

const throttle = (func, limit) => {
    if (!timeout) {
        func();
        timeout = setTimeout(function() {
          timeout = undefined;
        }, limit);
    }
};

$(document).on('click','#right',function(){
    throttle(function(){
        $('#slider').animate(
            {'margin-left': '-=200px'},
            { duration:1100,easing:'easeOutElastic',queue: false}
        )
        // ...
        sliderPosition++; 
    }, 500);
})

這是兩全其美的方法，因為無論點擊多少次，在點擊期間動畫都以穩定的速度提供。 因此，這會給人一種印象，即 slider 是完全被動的，而如果點擊速度太快且數量太多，則不一定會在每次點擊時觸發 animation。 因此，與其說是點擊量，不如說是在您點擊時保持 animation 繼續運行。