0

我不能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/

4

2 回答 2

2

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

请参阅文档，特别是在 v1.4 中添加的签名，它只需要一个处理程序（向下滚动）。

编辑：有证据的 Jsfiddles：

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

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

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

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

于 2013-09-09T17:10:04.693 回答
0

你的整个范围有点不稳定。尝试这样的事情：

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...以确保没有旧的间隔持续存在。

于 2013-09-09T16:56:19.773 回答