我无法为我的函数运行clearInterval
。我使用它们通过触发setInterval
来滚动窗口,该函数触发scrollLeft
。代码:
function scrollSpan() {
$('nav#scrolling').children().css('width',config.windowWidth/10+'px');
var inter;
$('nav#scrolling').children('span').hover(function() {
var value;
if($(this).is('.scrollLeft')) {
value = '-=50'
} else {
value = '+=50'
}
inter = setInterval(function() {
$('body, html').animate({
scrollLeft: value
}, 50);
},0)
})
$('nav#scrolling').children('span').mouseleave(function() {
clearInterval(inter)
})
}
问题是,当触发mouseleave
时,间隔不会停止。
小提琴:http://jsfiddle.net/FpX4M/
您正在使用hover
,而您应该使用mouseenter
。 当只有一个处理程序传递给hover
则在进入和离开时都会调用该处理程序。 因此,您的hover
被调用两次(一次进入和一次离开),但您的mouseleave
只被调用一次。 这就是为什么即使一个间隔被清除,另一个间隔仍然存在。
请参阅文档,特别是 v1.4 中添加的签名,它只需要一个处理程序(向下滚动)。
编辑:Jsfiddles与证明:
http://jsfiddle.net/FpX4M/1/
打开控制台,看到处理程序触发两次,并且该间隔继续。
http://jsfiddle.net/FpX4M/2/
在控制台中,您现在只会看到处理程序的一次触发,然后间隔在休假时停止。
你的整个范围有点不稳定。尝试这样的事情:
var inter;
function scrollSpan() {
$('nav#scrolling').children().css('width',config.windowWidth/10+'px');
}
$('nav#scrolling').children('span').hover(function() {
var value;
if($(this).is('.scrollLeft')) {
value = '-=50'
} else {
value = '+=50'
}
inter = setInterval(function() {
$('body, html').animate({
scrollLeft: value
}, 50);
},0)
});
$('nav#scrolling').children('span').mouseleave(function() {
clearInterval(inter)
});
您需要确保 inter
变量可以在函数外部访问。此外,通常,状态函数不应该在函数中分配,除非你正在快速更改它们 - 而且看起来你不会在任何地方分离它们。函数中唯一需要做的事情是将要重复的事情。也许在inter = setInterval...
之前添加一个clearInterval(inter);
,以确保没有旧的间隔。