停止和删除jQuery计时器

本文介绍了停止和删除jQuery计时器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用jQuery计时器( jQuery计时器插件)在一个页面上设置多个计时器.当用户单击启动按钮时，它应该停止并删除以前的任何计时器(即使它本身已经启动)，并以原来的6秒间隔启动一个新计时器.

I'm using jQuery Timers (jQuery Timers plugin) to set multiple timers on a page. When the user clicks a start button, it should stop and remove any previous timer, even if it started itself, and start a new one with the original interval of 6 seconds.

我遇到的问题是该功能将停止原始计时器但不会将其删除，并且当另一个计时器使用相同的标签启动时，我最终会遇到两个带有相同标签的计时器不同步的情况.

The problem I'm having is that the function will stop the original timer but not remove it and when another timer starts up with the same label, I end up having two timers with the same label running out of sync.

对此有任何见识将不胜感激.

Any insight into this would be appreciated.

用户单击计时器1开始"

#timer01启动，显示剩余#timer01秒，显示数据01

用户单击计时器2开始"

#timer01停止，数据01隐藏，#timer02开始，显示#timer02秒剩余，显示数据02

用户单击计时器1开始"

#timer02停止，数据02隐藏，#timer01继续，#timer01作为新计时器生成，显示新旧#timer01的冲突时间，显示数据01，旧计时器在新计时器启动之前隐藏数据01. /li>

user clicks "Timer 1 Start"

#timer01 starts, displays #timer01 seconds remaining, shows data 01

user clicks "Timer 2 Start"

#timer01 stops, data 01 hides, #timer02 starts, displays #timer02 seconds remaining, shows data 02

user clicks "Timer 1 Start"

#timer02 stops, data 02 hides, #timer01 continues, #timer01 spawns as a new timer, displays conflicting times for both old and new #timer01, shows data 01, old timer hides data 01 before new timer is up.

六个字母应类似以下内容才能正常工作:

Six should read like the following for it to work correctly:

\ 6. #timer02停止，数据02隐藏，#timer01以新时间重启，显示剩余时间，显示数据01.

\6. #timer02 stops, data 02 hides, #timer01 restarts with new time, displays new time remaining, shows data 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>

推荐答案

所以我发现基于通用标签而不是使用标签来停止计时器效果最好.

So I figured out that stopping the timers based on the generic tag versus using the label worked best.

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