私はこのスクリプトを使用している背景

Question

でカウンタを停止します。

カウントダウンを開始して終了させるとすべてが機能しますが、2:00カウントダウンを作成して次の画面に移動し、2:00カウントダウンが終了すると5:00カウントダウンを作成し、終了コールバック関数を起動します。私はこの振る舞いを避けたい。

画面に表示されていませんが、カウンタは動作しています。画面を第2のカウンタに変更するには、clickイベントを持つdivをクリックする必要があります。

このクリックイベントでは、カウントダウンを破棄しようとしましたが、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

このカウンタを固執することを強くお勧めする場合は、おそらく2つのオプションのいずれかがあります。

1）コードベースをハックし、.stop（）メソッドなどを追加して、既存のカウンタを一時停止または停止できるようにします。

2）他のクリックイベントに設定されるフラグを追加して、「end：」メソッドをチェックインすることができます。基本的には、 "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'); 
    }); 

});