jQuery的停止和啓動定時器

Question

您好我有一個演示去我的網站在這裏：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(); 
    }); 

Answer 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() { ... } 
};