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