Question

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

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

对此有任何见解将不胜感激。

用户点击“计时器1开始”
＃timer01启动，显示剩余＃timer01秒，显示数据01
用户点击“定时器2开始”
＃timer01停止，数据01隐藏，＃timer02启动，显示＃timer02秒，显示数据02
用户点击“计时器1开始”

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

六个应该如下所示才能正常工作：

\ 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();
  });

停止和删除jQuery计时器

2 个答案: