停止功能突然，删除队列

Question

所以，我有了动画图标的功能：

https://jsfiddle.net/1658eaLr/

我要的，是当鼠标离开元素.button8，该功能会突然停止并删除队列。

问题是，当我用鼠标快速进出时，动画混乱起来。

我还试图用graph().stop();，但没有工作，要么

Answer 1

同样你已经在使用，setTimeout将返回clearInterval方法的独特timeoutId你可以用它来取消所有挂起超时使用window.clearTimeout。

因此，保持大部分代码不变，你可以写

var interval, timeout; 
var graph = function(){ 
$('.graph-line1').addClass('graph-line1-animate'); 
timeout = setTimeout(function(e){ 
    $('.graph-line2').addClass('graph-line2-animate'); 
    timeout = setTimeout(function(e){ 
     $('.graph-line3').addClass('graph-line3-animate'); 
     //... rest of the timeouts 

然后在 “悬停去” 回调

clearInterval(interval); 
clearTimeout(timeout); 

Here's a working fiddle。

顺便说一句，这些嵌套超时可以写得更干净，以避免“回调地狱”。 Here's my quick attempt，但我敢打赌你可以做得更好。

Answer 2

大厦上面的回答，您还可以得到由删除整个interval =一套回调的和不断变化的底部去掉一半的代码如下：

$(document).ready(function(e){ 
    $('.button8').hover(function(e){ 
    graph(); 
    interval = setInterval(graph, 2000); 
}, function(e){ 
    clearInterval(interval); 
    clearTimeout(timeout); 
});