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被触发时，间隔不会停止。

小提琴：http://jsfiddle.net/FpX4M/

Answer 1

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

请参阅documentation，特别是v1.4中添加的签名，它只需要一个处理程序（scrollldown）。

编辑：Jsfiddles带证据：

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

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

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

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

Answer 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变量。此外，通常情况下，不应在函数内分配状态函数，除非您快速更改它们 - 并且它看起来不像是在任何地方将它们分离。函数中唯一需要的东西就是重复的东西。也许可以在clearInterval(inter);之前添加inter = setInterval...，以确保没有旧的时间间隔。

clearInterval清除两个间隔

2 个答案: