Question

我正在尝试通过在单击“stop_button”时调用其他函数来确定如何通过单击“start_button”来停止递归函数调用。

用户点击'start_button'，向下滑动/向上动画继续“无限循环”直到......
用户点击“stop_button”，循环动画将停止。

我想保留两个不同的按钮，而不是一个两用的启动/停止按钮。使用下面的代码，动画启动并循环，但在单击停止按钮时不会停止。我希望停止按钮在点击时停止动画。

var stopSliding = false;

$('#stop_button').click(function(){
        stopSliding = true;
});

$('#start_button').click(function infiniteLoop(){
    if (stopSliding == true)
    {
        $('#top_message').stop();
        return;
    }       
    else
    {
        $('#top_message').hide().slideDown(2000);
        $('#top_message').slideUp(2000);    
        infiniteLoop();
        return;
    }
});

Answer 1

您正在同步调用infiniteLoop，这意味着任何其他Javascript都无法执行，例如停止按钮的单击处理程序。您需要使调用异步，以便您的单击处理程序可以执行。您可以使用setTimeout(infiniteLoop, 0);执行此操作，但仍然无法获得所需的行为，因为在调用infiniteLoop之前，您仍然没有等待滑块向上滑动。因此，您应该将infiniteLoop作为回调传递给slideUp。这将使它异步并使其等待动画完成：

$('#top_message').slideUp(2000, infiniteLoop);

您的updated JSFiddle。

Answer 2

问题可能是，当您想要停止动画时，仍有许多动画在队列中等待执行（因为您的代码运行速度比实际动画快）。通过提供clearQueue函数的可选参数stop，您可以删除所有等待的动画：

$('#top_message').stop(true)

Answer 3

我会这样写：

$('#start_button').click( function() {
    if ( stopSliding ) return false;
    $('#top_message').hide().slideDown(2000, function() {
          $('#top_message').slideUp(2000, $('#start_button').click);
    });
    return false;
});

$('#stop_button').click( function() {
    stopSliding = true;
    $('#top_message').stop();
});

Answer 4

我刚刚将stopSliding变量重置为flase，这样如果再次点击开始动画，它就不会停止动画。

jsfiddle

var stopSliding = false;

$('#stop_button').click(function(){
    stopSliding = true;
});

$('#slide_button').click(function infiniteLoop(){
    if (stopSliding == true)
    {
        $('#top_message').stop();
        stopSliding = false;
        return;
    }       
    else
    {
        $('#top_message').hide().slideDown(2000);
        $('#top_message').slideUp(2000, infiniteLoop);
        return;
    }
});

停止递归函数调用onclick button1从另一个函数onclick button2

4 个答案: