Stoppen Sie einen Zähler im Hintergrund

Question

ich dieses Skript bin mit: CircularCountDownJs

ich bin mit verschiedenen Countdowns auf verschiedenen Bildschirmen zu schaffen und alles funktioniert perfekt außer einem großen Problem.

Wenn ich einen Countdown starte und ihn beenden lasse, funktioniert alles, aber wenn ich einen 2:00 Countdown erstelle, gehe zum nächsten Bildschirm und erstelle einen weiteren 5:00 Countdown, wenn der Countdown von 2:00 endet, Es löst die Ende-Callback-Funktion aus. Ich möchte dieses Verhalten vermeiden.

Ich weiß, dass der Zähler läuft, obwohl es nicht auf dem Bildschirm angezeigt wird. Um den Bildschirm in den zweiten Zähler zu ändern, muss der Benutzer auf eine div klicken, die ein Ereignis click hat.

Mit diesem Click-Ereignis habe ich versucht, den Countdown zu zerstören, aber ich kann den Zähler nur aus dem DOM entfernen. Der Countdown bleibt aktiv und führt die Endfunktion bei Erreichen von 0 aus.

Ich muss den Countdown für einen Benutzer manuell stoppen click Ereignis. Ich habe Tage in den Code hineingeschaut, aber ich kann nicht herausfinden, wie es geht.

Ich bin mit dem Countdown wie folgt aus:

$(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>

Oben ist das Beispiel, das ich lösen müssen. Die STOP-Taste muss den Countdown zerstören. Ich habe es grafisch gemacht, aber ich kann den Hintergrundprozess nicht stoppen.

Answer 1

Wenn Sie darauf beharren, mit diesem Zähler zu bleiben, haben Sie wahrscheinlich eine von zwei Optionen.

1) Hacken Sie die Codebasis und fügen Sie eine .stop() - Methode oder etwas davon hinzu, so dass Sie daran binden und einen vorhandenen Zähler anhalten oder anhalten können.

2) Fügen Sie ein Flag hinzu, das auf Ihrem anderen Klick-Ereignis gesetzt wird, damit Sie Ihre "end:" Methode einchecken können. Im Grunde würde es nicht die "Ende" -Methode vom Laufen halten, aber es würde einfach die ganze Logik überspringen.

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

});