Why isn't my if function targeting the “timer” variable? I am trying to get it to alert/console “time is up” when the timer hits 0

Question

Let me know if anyone has any ideas. I hope I don't get to much hate for this but I have been playing around with this for a while and it isn't working for me.`

function countdown() {
    timer = 20;
    timerId = setInterval(function() {
        timer--;
        console.log(timer);
        $(".timer").html("Timer: " +timer);
    }, 1000);
}

countdown();

if(timer == 0) {
    console.log("Time is up");
    alert("Time is up!");
    incorrect ++;
    $(".list-group").hide();
    $(".Game").hide();
    $(".timer").hide();
    $(".timer").reset();
    $(".Photo1").show();
}

Answer 1

create a function to check the timer variable in every intervals

var timer, timerId ;
function countdown() {
    timer = 20;
    timerId = setInterval(function() {
        timer--;
        console.log(timer);
        $(".timer").html("Timer: " +timer);
        check();//call check function in every intervals
    }, 1000);
}

countdown();
function check(){
    if(timer == 0) {
      clearTimeout(timerId );//clear timer function
      console.log("Time is up");
      alert("Time is up!");
      incorrect ++;
      $(".list-group").hide();
      $(".Game").hide();
      $(".timer").hide();
      $(".timer").reset();
      $(".Photo1").show();
    }
}

Answer 2

Move your "timeup" code into the interval.

function countdown() {
    timer = 20;
    timerId = setInterval(function() {
        timer--;
        console.log(timer);
        $(".timer").html("Timer: " +timer);
        if(timer == 0) {
            console.log("Time is up");
            alert("Time is up!");
            incorrect ++;
            $(".list-group").hide();
            $(".Game").hide();
            $(".timer").hide();
            $(".timer").reset();
            $(".Photo1").show();
        }
    }, 1000);
}

countdown();

Answer 3

If I understand your question correctly, then to achieve this you'll want to move the logic that triggers your alert("Time is up!"); and console.log() behaviour into the interval callback as follows:

 function countdown() { var timer = 20; var incorrect = 0; var timerId = setInterval(function() { timer--; console.log(timer); $(".timer").html("Timer: " +timer); // place alert and console log logic here // so that it is run when timer equals zero if(timer === 0) { console.log("Time is up"); alert("Time is up!"); incorrect ++; $(".list-group").hide(); $(".Game").hide(); $(".timer").hide(); $(".timer").reset(); $(".Photo1").show(); } }, 1000); } countdown(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

Answer 4

You can check the timer variable inside countdown() and use clearInterval() to stop the time like the following way:

 var timerId = setInterval(countdown, 1000); var timer = 20; var incorrect = 0; function countdown() { timer--; console.log(timer); //$(".timer").html("Timer: " +timer); if(timer == 0) { clearInterval(timerId); console.log("Time is up"); //alert("Time is up!"); incorrect ++; /*$(".list-group").hide(); $(".Game").hide(); $(".timer").hide(); $(".timer").reset(); $(".Photo1").show();*/ } } countdown(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>