jQuery 停止和启动计时器答案

【问题标题】：jQuery Stopping and Starting TimersjQuery 停止和启动计时器
【发布时间】：2010-02-18 21:36:08
【问题描述】：

您好，我的网站有一个演示：treethink.treethink.net/backup

我在计时器的右侧有收回新闻代码，当您单击导航项目时，我让代码收回，但我需要结束计时器以使其保持收回。然后，当您单击关闭按钮时，我需要再次启动计时器。

这是我的 jQuery：

    /* News Ticker */

    /* Initially hide all news items */

    $('#ticker1').hide();
    $('#ticker2').hide();
    $('#ticker3').hide();

    var randomNum = Math.floor(Math.random()*3); /* Pick random number */

    $("#ticker").oneTime(2000,function(i) { /* Do the first pull out once */

        $('div#ticker div:eq(' + randomNum + ')').show(); /* Select div with random number */

        $("#ticker").animate({right: "0"}, {duration: 800 }); /* Pull out ticker with random div */

    });

    $("#ticker").oneTime(15000,function(i) { /* Do the first retract once */

        $("#ticker").animate({right: "-450"}, {duration: 800}); /* Retract ticker */

        $("#ticker").oneTime(1000,function(i) { /* Afterwards */

            $('div#ticker div:eq(' + (randomNum) + ')').hide(); /* Hide that div */

        });

    });

    $("#ticker").everyTime(16500,function(i) { /* Everytime timer gets to certain point */

        /* Show next div */

        randomNum = (randomNum+1)%3;

        $('div#ticker div:eq(' + (randomNum) + ')').show();

        $("#ticker").animate({right: "0"}, {duration: 800}); /* Pull out right away */


        $("#ticker").oneTime(15000,function(i) { /* Afterwards */

            $("#ticker").animate({right: "-450"}, {duration: 800});/* Retract ticker */

        });

        $("#ticker").oneTime(16000,function(i) { /* Afterwards */

            /* Hide all divs */

            $('#ticker1').hide();
            $('#ticker2').hide();
            $('#ticker3').hide();

        });

    });

/* Nav Items */

    $("#nav li").click(function() { /* On click */

        $("#ticker").animate({right: "-450"}, {duration: 800});/* Retract ticker */

        $("#content").stop()                    
        .animate({
            top: '0'
        }, 750);

        $("#content").oneTime(750,function(i) {

            $("#content-footer-top").stop()                 
            .animate({
                bottom: '42px'
            }, 250);

            $("#content-footer").stop()                 
            .animate({
                bottom: '0'
            }, 250);

        });

    });

    $("li#close").click(function() { /* On click */

        $("#content").oneTime(1000,function(i) {

            $('#content div.content-page').hide();

        }); 

        $("#content").oneTime(250,function(i) {

            $("#content").stop()                    
            .animate({
                top: '-100%'
            }, 750);

        });

        $("#content-footer-top").stop()                 
        .animate({
            bottom: '-46px'
        }, 250);

        $("#content-footer").stop()                 
        .animate({
            bottom: '-88px'
        }, 250);

    });

    $('#content div.content-page').hide();

    $("#nav li#services").click(function() {
        $('#content #services').show();
    });

    $("#nav li#portfolio").click(function() {
        $('#content #portfolio').show();
    });

    $("#nav li#contact").click(function() {
        $('#content #contact').show();
    });

【问题讨论】：

我可以将新闻自动收录器放在一个函数中，在页面加载时启动该函数，然后在单击导航项时将其终止，然后在关闭时重新启动？我还想过在单击导航项时收回 div 并隐藏它，然后显示它，然后在单击关闭时将其提取。
好的，我现在正在使用隐藏方法，但计时器仍在后台运行，这意味着当 div 关闭时它不会重新开始循环，而是可能需要整个时间再次缩回，或者它可能会在半秒后缩回，具体取决于它在循环中的位置。

标签： jquery timer

【解决方案1】：

我认为您需要致电 stopTime()，因为您似乎正在使用 jQuery timers 插件。

使用普通的旧 javascript，这些是 setInterval 和 clearInterval 方法。

如果您将一些代码重构为启动和停止计时器并封装逻辑的函数，则可能会更容易。 newsTicker“对象”可以跟踪当前启用的代码，并轮换出当前/下一个。我为一个自动收报机类型的东西做了类似的事情，如果你将鼠标悬停在该区域上会暂停，但一旦你将鼠标移开就会重新启动。使用任何更简洁易懂的方法 - 标准 javascript 方法或 jQuery 计时器插件。

例如

$().ready( {
    newsTicker.init(); 

    $("#navBar").hover(newsTicker.pause, newsTicker.play);
};

var newsTicker = {
    init: function () { ... },
    pause: function() { ... }, 
    play: function() { ... }
};

【讨论】：