jquery - 使用 jQuery 在队列中调用函数，包括回调

Question

在我的应用程序中，我正在使用 callback 事件上的 .animate() 制作一些动画。如果事件快速触发，假设在半秒内触发 5 次，我如何对所有触发的事件进行排队，因为在我的回调函数中，变量正在更新自身并且我希望在下一个触发的事件中更新值。

我的动画函数在这里:

function animateOnTouch() {
    $(this).animate({
        left : width*number
    },600,"linear",function(){
        updateNumber();    // updating the variable number
    });
}

当 animateOnTouch 在不到 600 毫秒内第二次触发时，我没有获得更新的值。

Answer 1

jQuery 方式(使用 jQuery.queue ):

function animateOnTouch() {
    var self = this;
    $(this).queue(function () {
        $(self).animate({
            left : width*number
        }, 600, "linear", function() {
            updateNumber();
            $(self).dequeue();
        });
    });
}

纯 JS 方法示例:

var animationInProgress = false;
function animateOnTouch() {
    if (animationInProgress) {
        queueAnimation();
    } else {
        animate();
    }
}
function animate() {
    animationInProgress = true;
    obj.animate({
        left : width*number
    }, 600, "linear", function() {
        updateNumber();
        animateAllQueued(function () {
            animationInProgress = false;
        });
    });
}