Stopping and removing jQuery Timers

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. 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 da开发者_高级运维ta 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 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>

The 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>

I'm not sure but I think that your problem is that you use stopTime to stop the time, but you do not stop the countdown, before starting off a new one e.g.

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

Also, do you know that you have:

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

twice. Shouldn't one of them reference "#timer02"?

Regards Neil

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