0

我正在研究一个相当奇怪和复杂的功能。这个想法是有一个运行滑块的计时器。当滑块悬停时（即滑块停止移动），此计时器将被清除。我还希望在滑块（或者更确切地说，它的父容器）不在视线范围内时清除计时器。使用插件 inview，我可以检查元素是否在视口中。所以当我看到父元素不再在视口中时，我清除了计时器。但是，这不起作用，我不知道为什么。在悬停时清除计时器确实有效。这是一个小提琴。

不工作的部分：

$("body > .section").bind('inview', function (event, isInView) {
    var $this = $(this);

    if (isInView) {
        // Päuse Twitter slider if it's not in the viewport
        if (!$this.is(".twitter")) {
            clearInterval(timer);
            console.log("Timer cleared");
            $(".twitter .article.focus").addClass("pause");
        } else {
            $(".twitter .article").removeClass("pause");
            startTimer();
            console.log("Timer restart");
        }
    }
});

如您所见，事件记录在控制台中，因此它们被触发，但滑块不会停止（如您在控制台中看到的：类仍然分配并删除到 .twitter 内的 .articles。这意味着计时器没有清除。但为什么不呢？我想不通。定时器是全局设置的，所以这应该不是问题。

编辑：哦，显然在悬停时清除计时器也不起作用......这很奇怪，因为所有的 console.logs 都可以工作。ANDtimer设置为全局变量。

4

1 回答 1

1

关键是不要多次启动计时器。每当您到达被监视元素的顶部或底部时，inview jQuery 插件都会触发 inview 事件，并且在您的示例中，每次发生这种情况时都会启动新的计时器。并且由于新计时器替换了您已经设置的计时器，因此您会忘记那个旧计时器并且之后无法清除它。

尝试抽象启动和暂停代码，每次启动时，检查计时器是否启动。例如像这样：

function startSlider() {
    if (!timer) {
        startTimer();
    }
}

function pauseSlider() {
    clearInterval(timer);
    timer = null;
}

我已经更新了jsfiddle，您可以在其中看到它正在运行。

于 2014-08-08T14:46:12.583 回答