我如何停止mouseleave的这个倒计时？

Question

下面是代码：

//Mouseover start countdown 

$("#icon_no_1").mouseover(function() 
{ 

$(this).fadeTo("slow", 0.23); 

//Countdown 

var counter = 0; 
var interval = setInterval(function() { 
    counter++; 
    // Display 'counter' wherever you want to display it. 

    if (counter == 1) { 

    //Display 1 
    $('#login_icon_1').fadeIn(); 
    //Fade in 

    } 

    if (counter == 2) { 

    //Display 2 

    $('#login_icon_1').fadeOut(750); 

    //Fade in login icon 2 

    $('#login_icon_2').fadeIn(); 

    } 

    if (counter == 3) { 

    //Display 3 

    //Display 2 

    $('#login_icon_2').fadeOut(500); 

    //Fade in login icon 2 

    $('#login_icon_3').fadeIn(); 

    } 

    if (counter == 4) { 

    //Display 4 

    //Display 2 

    $('#login_icon_3').fadeOut(500); 

    //Fade in login icon 2 

    $('#login_icon_4').fadeIn(); 

    } 

    if (counter == 5) { 

    //Display 2 

    $('#login_icon_4').fadeOut(500); 

    //Fade in login icon 2 

    $('#login_icon_5').fadeIn(); 

    //Display 2 

    $('#login_icon_5').fadeOut(1000); 

    } 

    if (counter == 6) { 

    counter = 7; 

    window.location.replace("/wahalu/index.php/login_advisor.php"); 
    } 
}, 1000); 

} 

); 

$("#icon_no_1").mouseleave(function() 
{ 

counter = 0; 

$(this).fadeTo("slow", 1); 

$('#login_icon_1').hide(); 
$('#login_icon_2').hide(); 
$('#login_icon_3').hide(); 
$('#login_icon_4').hide(); 
$('#login_icon_5').hide(); 

} 

); 

}); 

Answer 1

另一种方法是将变量从鼠标悬停中移出，以便它可以与mouseleave共享。

var interval; // <-- is in scope of both events now 

$("#icon_no_1").mouseover(function() 
{ 

$(this).fadeTo("slow", 0.23); 

//Countdown 

var counter = 0; 
interval = setInterval(function() { 
    counter++; 
    // Display 'counter' wherever you want 

    // etc etc etc 

现在的间隔访问鼠标离开

$("#icon_no_1").mouseleave(function() 
{ 

counter = 0; 

clearInterval(interval) 

// etc etc etc 

它不是一个全局变量，如果你正在运行的$内部代码（文件）。就绪（）

Answer 2

商店与元素的间隔，而不是这样的：

var interval = setInterval(function() { 
    //code 
}, 1000); 

这样做：

$.data(this, 'interval', setInterval(function() { 
    //code 
}, 1000)); 

然后在你的mouseleave处理程序，将其清使用clearInterval()，如下所示：

$("#icon_no_1").mouseleave(function() { 
    clearInterval($.data(this, 'interval')); 
    counter = 0; 
    $(this).fadeTo("slow", 1); 
    $('#login_icon_1, #login_icon_2, #login_icon_3, #login_icon_4, #login_icon_5').hide(); 
}); 

这种做超时/间隔的方式消除了全局变量，如果需要，每个元素可以有一个超时/间隔（而不是每个超时/间隔的全局变量，每个元素）。