javascript - clearInterval 清除两个间隔

Question

我无法为我的函数运行 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 时，间隔不会停止。

fiddle :http://jsfiddle.net/FpX4M/

Answer 1

您正在使用 hover，而您应该使用 mouseenter。当只有一个处理程序传递给 hover 时，该处理程序会在进入和离开时调用 both。因此，您的 hover 被调用两次(一次进入，一次离开)，但您的 mouseleave 仅被调用一次。这就是为什么即使一个间隔被清除，另一个间隔仍然存在。

请参阅documentation ，特别是 v1.4 中添加的签名，它只需要一个处理程序(向下滚动)。

编辑:带有证明的 Jsfiddles:

http://jsfiddle.net/FpX4M/1/

打开控制台并查看处理程序触发两次并且该间隔持续。

http://jsfiddle.net/FpX4M/2/

在控制台中，您现在将只看到处理程序的一次触发，然后间隔在休假时停止。