停止計數器的背景

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

});