停止和删除jQuery计时器

Question

我正在使用jQuery Timers（jQuery Timers plugin）在页面上设置多个计时器。当用户单击开始按钮时，它应该停止并删除任何先前的计时器，即使它自己启动，并以原始间隔6秒开始一个新的计时器。

我遇到的问题是该函数将停止原始计时器但不删除它，当另一个计时器启动时使用相同的标签时，我最终得到两个同一标签运行不同步的计时器。

任何洞察这一点将不胜感激。

1. 用户点击“定时器1开始”
2. ＃timer01启动，显示剩余＃timer01秒，显示数据01
3. 用户点击“定时器2开始”
4. ＃timer01停止，数据01隐藏，＃timer02启动，显示剩余＃timer02秒，显示数据02
5. 用户点击“定时器1开始”
6. ＃timer02停止，数据02隐藏，＃timer01继续，＃timer01作为新计时器生成，显示新旧＃timer01的冲突时间，显示数据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>

Answer 1

我不确定，但我认为你的问题是你使用stopTime来停止时间，但你没有停止倒计时，而是在开始新的时间之前，例如

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

另外，你知道你有：

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

两次。其中一个不应该引用“＃timer02”吗？

问候尼尔

Answer 2

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

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