Question

在我的应用程序中，我正在使用.animate()对callback的事件进行一些动画制作。如果事件快速发生，请说半秒钟中的5次，我怎么能queue所有被触发的事件，因为在我的callback函数中，变量正在自我更新，我想要更新的值下一个事件被解雇了。

我的动画功能在这里：

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;
        });
    });
}

函数调用队列，包括使用jQuery进行回调

1 个答案: