Question

我正在使用它在不同的屏幕上创建不同的倒计时，除了一个大问题外，一切都很完美。

当我开始倒计时并让它完成时，一切正常，但如果我创建2:00倒计时，移动到下一个屏幕，并创建另一个5:00倒计时，当2:00倒计时结束时，它触发结束回调函数。我想避免这种行为。

我知道计数器正在运行，但屏幕上没有显示。要将屏幕更改为第二个计数器，用户必须点击div，其中有click个事件。

有了这个点击事件，我试图破坏倒计时，但我只能从DOM中删除计数器。倒计时仍然有效，并在到达0时执行结束功能。

我需要手动停止用户click事件的倒计时。我已经查看了代码几天，但我无法弄清楚如何做到这一点。

我正在使用这样的倒计时：

$(document).ready(function() {

  valor_tiempo_f13 = 10;

  $('#pf-ag-fase1-start').click(function() {
    //empezar programa
    console.log('Programa iniciado');
    // Run the countdown
    $('#quesito').circularCountDown({
      delayToFadeIn: 500,
      size: 160,
      fontColor: '#fff',
      colorCircle: '#2a292f',
      background: '#2a292f',
      reverseLoading: false,
      duration: {
        hours: 0,
        minutes: 0,
        seconds: valor_tiempo_f13
      },
      beforeStart: function() {
      },
      end: function(countdown) {
        countdown.destroy();
        $('.launcher').show();
        $('#facial-antiaging-2-finalizada').addClass('active');
        console.log('Programa terminado');
      }
    });
  });
  
  $('#stop').click(function() {
    console.log('needs to really stop the countdown');
  });
  
});

#stop{
  background: #ccc;
  position: absolute;
  left: 20%;
  bottom: 10%;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.espluga.net/genesis10api/js/circular-countdown.min.js"></script>

<div id="quesito" class="timer"></div>

<div id="pf-ag-fase1-start">START</div>

<div id="stop">STOP</div>

以上是我需要解决的例子。 STOP按钮必须消除倒计时。我以图形方式完成了它，但我无法阻止后台进程。

Answer 1

如果你坚持坚持使用这个计数器，你可能有两个选择之一。

1）破解代码库并添加一个.stop（）方法，以便你可以绑定它并暂停或停止现有的计数器。

2）添加一个在你的其他点击事件中设置的标志，这样你就可以检查你的＆＃34;结束：＆＃34;方法。基本上它不会保持＆＃34;结束＆＃34;来自运行的方法，但它只会跳过所有逻辑。

$(document).ready(function() {
  var continue_timer = true;
  valor_tiempo_f13 = 10;

  $('#pf-ag-fase1-start').click(function() {
    //empezar programa
    console.log('Programa iniciado');
    // Run the countdown
    $('#quesito').circularCountDown({
      delayToFadeIn: 500,
      size: 160,
      fontColor: '#fff',
      colorCircle: '#2a292f',
      background: '#2a292f',
      reverseLoading: false,
      duration: {
        hours: 0,
        minutes: 0,
        seconds: valor_tiempo_f13
      },
      beforeStart: function() {
      },
      end: function(countdown) {
        // continue_timer gets set to "false" when your other timer is created
        if (continue_timer === true) {
            countdown.destroy();
            $('.launcher').show();
            $('#facial-antiaging-2-finalizada').addClass('active');
            console.log('Programa terminado');
        }
      }
    });
  });

  $('#stop').click(function() {
    // set our flag to false so our end method doesn't do anything.
    continue_timer = false;
    // Hide the initial timer or whatever you want to do
    $('#quesito').hide();
    console.log('needs to really stop the countdown');
  });

});

在后台停止计数器

1 个答案: