停止递归函数调用onclick button1从不同的函数onclick按钮2

Question

我想确定如何通过调用'stop_button'时单击一个不同的函数来阻止来自点击'start_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); 

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