Очистка интервала не работает

Question

Я работаю над довольно странной и сложной функцией. Идея в том, что есть таймер, который запускает слайдер. Этот таймер очищается при наведении ползунка (то есть ползунок прекращает движение). Я также хотел бы, чтобы таймер очищался, когда ползунок (или, скорее, его родительский контейнер) находится вне поля зрения. С плагином 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");
        }
    }
});

Как видите, события регистрируются в консоли, поэтому они запускаются, но ползунок не останавливается (как вы можете видеть в консоли: классы все еще назначаются и удаляются в.articles внутри.twitter. Это означает, что таймер не очищается. Но почему нет? Я не могу понять. Таймер установлен глобально, так что это не должно быть проблемой.

РЕДАКТИРОВАТЬ: о, очевидно, очистка таймера при наведении тоже не работает... Это странно, потому что все console.logs работают. А ТАКЖЕ timer устанавливается как глобальная переменная

Answer 1

Ключ не должен запускать таймер больше раз. Плагин inview jQuery запускает событие inview каждый раз, когда вы достигаете вершины или низа наблюдаемого элемента, и в вашем примере вы запускаете новый таймер каждый раз, когда это происходит. И поскольку новый таймер заменяет уже установленный таймер, вы теряете след этого старого таймера и не можете его очистить впоследствии.

Попробуйте абстрагировать код запуска и паузы и при каждом запуске проверять, запущен ли таймер. Например, вот так:

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

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

Я обновил jsfiddle, где вы можете увидеть, как он работает в действии.