停止和删除 jQuery 计时器答案

【问题标题】：Stopping and removing jQuery Timers停止和删除 jQuery 计时器
【发布时间】：2011-01-26 15:08:42
【问题描述】：

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

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

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

用户点击“定时器 1 启动”
#timer01 启动，显示 #timer01 剩余秒数，显示数据 01
用户点击“定时器 2 启动”
#timer01 停止，数据 01 隐藏，#timer02 启动，显示 #timer02 剩余秒数，显示数据 02
用户点击“定时器 1 启动”
#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>

【问题讨论】：

标签： jquery jquery-plugins

【解决方案1】：

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

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

另外，你知道你有：

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

两次。他们中的一个不应该引用“#timer02”吗？

问候尼尔

【讨论】：

是的，对不起。我已经纠正了这一点并删除了倒计时。另外，想出了一个使用通用标签来停止所有计时器的解决方案，它似乎可以工作。

【解决方案2】：

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

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

【讨论】：