清除间隔清除两个间隔

clearInterval clearing two intervals

本文关键字：清除 两个      更新时间：2023-09-26

我无法为我的函数运行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);，以确保没有旧的间隔。

相关文章：