Question

我正在研究一个相当奇怪和复杂的功能。这个想法是有一个运行滑块的计时器。当滑块悬停时（即滑块停止移动），该计时器被清除。我还希望在滑块（或者更确切地说，它的父容器）不在视图时清除计时器。使用插件inview，我可以检查元素是否在视口中。所以当我看到父元素不再出现在视口中时，我清除了计时器。但是，这不起作用，我无法弄清楚原因。在悬停时清除计时器确实有效。这是fiddle。

无效的部分：

$("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.log都可以正常工作。 AND timer被设置为全局变量。

Answer 1

关键是不要多次启动计时器。 inview jQuery插件会在您到达被监视元素的顶部或底部的任何时候触发inview事件，并且在您的示例中，每次发生这种情况时都会启动新的计时器。并且由于新的计时器取代了您已经设置的计时器，因此您将失去对旧计时器的跟踪，并且之后无法清除它。

尝试抽象开始＆amp;暂停代码，每次启动时，检查计时器是否已启动。例如：

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

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

我更新了jsfiddle，您可以在其中看到它正在发挥作用。

清除间隔不起作用

1 个答案: