停止和删除jQuery计时器 [英] Stopping and removing jQuery Timers

问题描述

我正在使用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. 用户单击计时器1开始"
2. #timer01启动，显示剩余#timer01秒，显示数据01
3. 用户单击计时器2开始"
4. #timer01停止，数据01隐藏，#timer02开始，显示#timer02秒剩余，显示数据02
5. 用户单击计时器1开始"
6. #timer02停止，数据02隐藏，#timer01继续，#timer01作为新计时器生成，显示新旧#timer01的冲突时间，显示数据01，旧计时器在新计时器启动之前隐藏数据01. /li>

1. user clicks "Timer 1 Start"
2. #timer01 starts, displays #timer01 seconds remaining, shows data 01
3. user clicks "Timer 2 Start"
4. #timer01 stops, data 01 hides, #timer02 starts, displays #timer02 seconds remaining, shows data 02
5. user clicks "Timer 1 Start"
6. #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();
  });

这篇关于停止和删除jQuery计时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！