在队列中调用的函数，包括使用 jQuery 的回调答案

【问题标题】：functions calling in queue including callback using jQuery在队列中调用的函数，包括使用 jQuery 的回调
【发布时间】：2014-01-24 09:31:25
【问题描述】：

在我的应用程序中，我正在使用.animate() 对带有callback 的事件进行一些动画处理。如果事件快速触发，假设在半秒内触发 5 次，我怎么能queue 所有触发的事件，因为在我的callback 函数中，一个变量正在更新自身，我希望在下一个触发的事件中更新值。

我的动画功能在这里：

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

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

【问题讨论】：

请显示updateNumber()来源。
可以是任何东西，比如number++，我的实际功能完全不同。
您仅在动画完成后更新您的number。尝试在动画开始时更新它。
不，我需要在动画完成后更新它，有些功能只有在动画完成后才能使用。

标签： jquery animation queue

【解决方案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;
        });
    });
}

【讨论】：

Thanx vbo，但是我如何实现queueAnimation() 和animateAllQueued，我知道一种方法是使用push() 和shift() 方法。好点吗？或任何其他方法？
哦，在这种情况下并不重要。你甚至可以坚持增加/减少一些计数器。顺便说一句，检查我更新的答案，刚刚想出了 jQuery 方法。