ストップ機能、削除キュー

Question

だから、私は、アイコンをアニメーション化するために持っている機能を持っている：

https://jsfiddle.net/1658eaLr/

、マウスは機能が突然停止することを、要素.button8を離れるとき私は何をしたいですキューを削除します。

問題は、私がマウスを使って非常に速く出入りするときです。アニメーションが狂ってしまいます。

私もgraph().stop();を使用しようとしましたが、それはあなたが既に使用しているclearInterval方法に同様

Answer 1

いずれも動作しませんでした、setTimeoutはあなたがすべての保留中のタイムアウトをキャンセルするために使用できるユニークな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); 
});