停止计数器的背景

Question

我使用这个脚本：CircularCountDownJs

我用它来创建不同屏幕上不同的倒计时，一切完美的作品，除了一个大问题。

当我开始倒计时并让它结束时，一切正常，但是如果我创建2:00倒计时，移至下一个屏幕，并在倒计时2:00结束时创建另一个5: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）添加一个标记，在您的其他单击事件中设置，以便您可以检查您的“end：”方法。基本上它不会让“结束”方法运行，但它会跳过所有的逻辑。

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

});