Javascript 停止功能，删除队列

因此，我有一个函数，必须为图标设置动画：

我想要的是，当鼠标离开元素

.button8

，函数将突然停止并删除队列

问题是，当我用鼠标快速进出的时候，动画就搞砸了

---

我还尝试使用

graph（）.stop（）

，但这也不起作用

类似于您正在使用的

clearInterval

方法，

setTimeout

将返回一个唯一的timeoutId，您可以使用该ID取消所有挂起的超时

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

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

方法类似，

setTimeout

将返回一个唯一的timeoutId，您可以使用该ID取消所有挂起的超时

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

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

然后在“悬停”回调中

---

另外，这些嵌套超时可以写得更干净一些，以避免“回调地狱”，但我打赌你可以做得更好

在上述答案的基础上，您还可以删除整个

interval=

回调集并更改底部，从而去掉一半代码，如下所示：

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

---

在上述答案的基础上，您还可以删除整个

interval=

回调集并按如下方式更改底部，从而去掉一半代码：

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

---

很好，成功了！非常感谢你！我完全忘了重置超时：pNice，成功了！非常感谢你！我完全忘了重置超时：p