停止和刪除jQuery定時器

我使用jQuery定時器（jQuery Timers plugin）在頁面上設置多個定時器。當用戶點擊一個開始按鈕時，它應該停止並刪除任何以前的定時器，即使它自己開始，並且以6秒的原始間隔開始一個新的定時器。停止和刪除jQuery定時器

我遇到的問題是該函數將停止原始計時器，但不會將其刪除，並且當另一個計時器以相同標籤啓動時，最終會有兩個具有相同標籤的計時器不同步。

任何洞察到這一點，將不勝感激。

用戶點擊「定時器1開始」
＃timer01開始時，顯示＃timer01秒剩餘，示出了數據01
用戶點擊「定時器2啓動」
＃timer01停止時，數據01的生皮，＃timer02啓動時，顯示＃timer02秒剩餘，示出了數據02
用戶點擊「定時器1開始」
＃timer02停止時，數據02的生皮，＃timer01繼續，＃timer01派生作爲一個新的計時器，顯示相沖突的時間新舊兩種＃timer01，笑ws數據01，舊定時器在新定時器啓動之前隱藏數據01。

六讀起來像下面爲它正常工作：

\ 6。＃timer02停止，數據02獸皮，＃timer01新的時間重新啓動，顯示新的剩餘時間，顯示數據01

<script src="javascript/jquery.min.js" type="text/javascript"></script> 
<script src="javascript/jquery.timers.js" type="text/javascript"></script> 
<script src="javascript/jquery.countdown.min.js" type="text/javascript"></script> 

<script> 
    $(function(){ 
    $("#preview01, #preview02, p.msg").hide(); 

    $("#timer01").click(function(){ 
     $("#preview01, #preview02, p.msg").fadeOut("slow"); 
     $("#timer01").stopTime("#timer01"); 
     $('p.countdown span').countdown({seconds: 5}); 
     $("#timer01").oneTime(6000, function(){ 
     $("#preview01").slideUp("slow"); 
     $("p.msg").text("time's up 1").show(); 
     }); 
     $("#preview01").slideDown("slow"); 
    }); 

    $("#timer02").click(function(){ 
     $("#preview01, #preview02, p.msg").fadeOut("slow"); 
     $("#timer01").stopTime("#timer01"); 
     $('p.countdown span').countdown({seconds: 5}); 
     $("#timer02").oneTime(6000, function(){ 
     $("#preview02").slideUp("slow"); 
     $("p.msg").text("time's up 2").show(); 
     }); 
     $("#preview02").slideDown("slow"); 
    }); 

    }) 
</script>

的HTML：

<ul> 
    <li><a href="#" id="timer01">Timer One Start</a></li> 
    <li><a href="#" id="timer02">Timer Two Start</a></li> 
</ul> 
<p class="countdown"> 
    <span></span> seconds left. 
</p> 
<p class="msg"> 

</p> 
<div id="preview01"> 
    <ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li><a href="#" class="stop">Timer Stop</a></li> 
    </ul> 
</div><!-- #preview --> 
<div id="preview02"> 
    <ul> 
    <li>Four</li> 
    <li>Five</li> 
    <li>Six</li> 
    <li><a href="#" class="stop">Timer Stop</a></li> 
    </ul> 
</div>

來源

2011-01-26 jayfallon

我不知道，但我認爲，你的問題是你使用stopTime來停止時間，但是你不會停止倒計時，然後開始一個新的例如

$('p.countdown span').countdown('destroy'); 
$('p.countdown span').countdown({seconds: 5});

另外，你知道你有：

$("#timer01").stopTime("#timer01");

兩次。不應該其中一個引用「＃timer02」嗎？

問候尼爾

來源

2011-01-26 15:53:36 Neil

是的，抱歉。我糾正了這一點，並刪除了倒計時。此外，找出了使用通用標籤來停止所有計時器的解決方案，並且它似乎可行。 – jayfallon 2011-01-26 16:02:14

所以我想通了，停止基於通用標籤與使用該標籤的定時器效果最好。

//stop timers 
    $("#timer01, #timer02").click(function(){ 
    $("a").stopTime(); 
    $("p.countdown span").remove(); 
    });

來源

2011-01-28 03:25:37 jayfallon

停止和刪除jQuery定時器

回答

相關問題