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

Question

我试图通过单击“ stop_button”时调用另一个函数来确定如何停止从单击“ start_button”而来的递归函数调用。

• 用户单击“开始按钮”，向下/向上滑动动画继续“无限”循环，直到...
• 用户单击“ stop_button”，循环的动画将停止。

我想保留两个不同的按钮，而不要使用一个双重用途的“开始/停止”按钮。 使用下面的代码，动画将开始并循环播放，但单击“停止”按钮时不会停止。 我想单击“停止”按钮来停止动画。

http://jsfiddle.net/ZdtmZ/

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

您更新的JSFiddle 。

Answer 2

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

$('#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;
    }
});