Question

我有一个跳跃动画的动画

$("#bounce").click(function() {
    doBounce($(this), 3, '10px', 300);       
});


function doBounce(element, times, distance, speed) {
    for(i = 0; i < times; i++) {
        element
            .animate({marginTop: '-='+distance},speed)
            .animate({marginTop: '+='+distance},speed);
    }        
}

但是，当我在元素上多次单击时，会启动各种动画，从而形成一堆事件。我想点击并且当前动画没有结束时，即使我点击元素也无法启动其他镜头。怎么做？

Answer 1

有几种方法，但我建议您使用Javascript scope设置一个bool，如果动画完成则返回true。请参阅this Fiddle并在动画时点击几次。

(function () {

    var animate = true;

    $("#bounce").click(function () {
        // Only fire when true, which it is by default.
        if (animate) {
            doBounce($(this), 3, '10px', 300);
        }
    });


    function doBounce(element, times, distance, speed) {

        // Set to false to prevent new calls. 
        animate = false;

        for (i = 0; i < times; i++) {
            element.animate({
                marginTop: '-=' + distance
            }, speed)
                .animate({
                marginTop: '+=' + distance
            }, speed);
        }

        // Set the var back to true after animations are finished.
        // https://api.jquery.com/promise/
        element.promise().done(function () {
            animate = true;
            alert(animate);
        });

    }

})();

Answer 2

另一个解决方案是节流功能。节流函数包装另一个（子）函数，并防止对子节点的调用每n毫秒发生一次以上。这是一个使用梦幻般的lodash库的例子：

var doBounce = _.throttle(function(element, times, distance, speed) {
    // here, put your original doBounce code
}, lengthOfAnimation);

现在，无论您调用doBounce(/* some arguments */);多少次，实际代码每long_fAnimation毫秒都不会运行多次。

当然，只有每次动画的长度都相同时，这才有效。

lodash：https://lodash.com/
油门：https://lodash.com/docs#throttle

在电流没有结束之前不要拍新动画

2 个答案: