Остановка и удаление таймеров jQuery

Question

Я использую таймеры jQuery ( плагин jQuery Timers ) для установки нескольких таймеров на странице. Когда пользователь нажимает кнопку запуска, он должен остановить и удалить любой предыдущий таймер, даже если он запустился сам, и запустить новый с первоначальным интервалом в 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 до того, как новый таймер активируется.

Для правильной работы Six должно читаться следующее:

\ 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

Итак, я понял, что остановка таймеров на основе общего тега по сравнению с использованием метки работала лучше всего.

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

Answer 2

Я не уверен, но я думаю, что ваша проблема в том, что вы используете stopTime, чтобы остановить время, но вы не останавливаете обратный отсчет до запуска нового, например,

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

Также,знаете ли вы, что у вас есть:

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

дважды.Разве один из них не должен ссылаться на "# timer02"?

С уважением, Нил