Question

我有一个设置为在超时后播放的动画。完成后，此动画会在不同元素上重复播放。我正在利用animate方法的回调函数来启动下一个动画。我提取的代码如下：

function fancyAnimation() {
    // Get a random object property, which is actually the id for a dot
    var id = getRandomNumber( 1, 100 );

    // Apply an effect to the dot
    $( '#test' + id ).effect(
        'pulsate',
        { times : 3 },
        1000,
        fancyAnimation
    );
}

在点击事件中，我希望动画停止。在任何给定的时间，“fancyAnimation”函数排队运行，只是一次又一次排队等等。

有没有办法可以阻止此函数执行，从而结束某个事件的无限循环？如果是这样，你会怎么做？

非常感谢你！

编辑：根据请求，启动fancyAnimation的代码。

function initiateFancyAnimation() {
    animation_timeout = setTimeout( "fancyAnimation()", animation_interval );
}

Answer 1

嗯，简单的方法是设置一个全局标志，每次运行时都会检查它：

var runAnimation;

function fancyAnimation() {
    if (runAnimation) {
        // your function body as written
    }
}

$('#start').click(function() {
    runAnimation = true;
    fancyAnimation();
});

$('#stop').click(function() {
    runAnimation = false;
});

Answer 2

当用户点击该项目时，您可以将某个类应用于'dot'，然后在每个循环上检查该类，如下所示：

$('#button').click(function(){
    $('#targetDot').addClass('stop');
});

function fancyAnimation() {    
// Get a random object property, which is actually the id for a dot
    var id = getRandomNumber( 1, 100 );

    // Check for Class and Execute ONLY is .stop is not found //
    if ($(id).hasClass('stop') !== true ){
        // Apply an effect to the dot
        $( '#test' + id ).effect(
            'pulsate',
            { times : 3 },
            1000,
            fancyAnimation
        );
    }
}

编辑：

我过去使用过的一个替代方案是一个名为$.doTimeout的插件，它允许对回调进行更好的控制。

使用此插件，您可以执行以下操作：

$.doTimeout('timeoutID', 3000, function() {
    // Check for Global Run True / False Flag //
    if (runAnimation){
        fancyAnimation();
    }
});

由于回调仍在运行，因此不确定这是否有帮助;但它可以让你暂停实际的动画功能。

Answer 3

现在已经到了功能性反应式编程，这是使用BaconJS以这种方式完成它的一种方法（虽然它不是更短）。

$('#start').click(function(){  
    // open event bus
    var eventBus = new Bacon.Bus();

    // tell eventBus to run animation every time it receives event
    eventBus.onValue(function(){
        fancyAnimation();
    });

    // push initial event to start animation immediately
    eventBus.push();

    // continue to push events at interval
    eventBus.plug(Bacon.fromPoll(animation_interval, function(){
        return new Bacon.Next();
    }));

    $("#start").attr("disabled", "disabled");
    $("#stop").removeAttr("disabled"); 

    // tell eventBus to end when stop is clicked
    $('#stop').click(function(){
        eventBus.end();

        $("#stop").attr("disabled", "disabled");
        $("#start").removeAttr("disabled");   
    });
});

http://jsfiddle.net/ronaldchanou/o4hk0176/2/

的工作演示

取消/停止在jQuery / Javascript中执行的回调函数

3 个答案: