CODEWITHSUNDEEP
jquery
badrijani
badrijani

Reputation: 127

jquery countdown timer stop on zero

I'm making countdown with jquery from 5 seconds to zero, My countdown works perfectly but it goes infinitely I made if statement so If dro hits 0 I want timer to be stopped but don't know how to stop it, I tried clearinterval but not works any solutions ?

    var dro = 5;
    var saboloo = 0;
    function setup(){
        var es = $('#dro');
        dro--;
        es.html(dro);
        if(dro == 0){
            es.html(clearInterval(setup));
        }
    }
    setInterval(setup,1000);

<h1 class="wait"><span value="5" id="dro">5</span>Seconds before the game starts</h1>

Upvotes: 0

Views: 1543

Answers (3)

ThS
ThS

Reputation: 4783

You're not really "clearing the interval" as you didn't even assign the setInterval to a variable and also you're clearing a function (setup).

How things should go :

  • declare a variable that holds the number of the remaining seconds.
  • declare another variable to hold the "interval" so we can clear it later.
  • update the span with the remaining seconds along with decreasing the variable that is holding the number of the remaining seconds.
  • if that variable has reached zero, clear the interval.

The next example illustrates what's being said : 

let remSec = $("#count"),
  /** referencing the "span" element **/
  countSec = 4,
  /** 
  * number of the remaining seconds. Change this per your requirements.
  * Equals to 4 as we'll have "(4 - 0) + 1" seconds to write which equals 5 (because the second number 0 is also included).
  **/
  /** the interval is assigned to "timer" variable so we'll be able to stop it later **/
  timer = setInterval(() => {
  /** if the seconds hasn't yet reached zero ==> write it the span. Else clear the interval **/
  countSec >= 0 ? remSec.text(countSec--) : clearInterval(timer); /** we're writing the seconds in the  span along with decreasing the "countSec" variable value at the same time note the "--" that means post decrement (use the variable then decrease one from its value) **/
  }, 1000); /** the function runs for every second till the interval is cleared **/
<!-- for demo purposes, the "span" will hold the number of seconds -->
<div>countdown: <span id="count">5</span> seconds left.</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You can check my answer for another similar question if you want.

Hope I pushed you further.

Upvotes: 1

Henfs
Henfs

Reputation: 5411

There is no reference for the interval, so it's not possible to clear it later. You're trying to clear the interval for setup, but this is not the interval reference. setup is just the function you are calling on each interval.

So, you can create the correct reference to setInterval and use it later to clearInterval.

Let's put it on a variable and call it setupInterval.

var dro = 5;
var saboloo = 0;
function setup(){
    var es = $('#dro');
    dro--;
    es.html(dro);
    if(dro == 0){
        es.html(clearInterval(setupInterval)); // clear the interval using the correct reference
    }
}
var setupInterval = setInterval(setup, 1000); // setupInterval is the reference

Upvotes: 2

Fran&#231;ois Hupp&#233;
Fran&#231;ois Hupp&#233;

Reputation: 2116

I would use:

var dro = 5;
function setup(){
    var es = $('#dro');
    if(dro > 0){
        dro--;
        es.html(dro);
        let t = setTimeout(function(){
            setup();
        }, 1000);
    }
    else{
        es.html('game started');
    }
}
setup();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<h1 class="wait"><span value="5" id="dro">5</span>Seconds before the game starts</h1>

Upvotes: 1

Related Questions