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

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

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

$('#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/