CODEWITHSUNDEEP
javascriptjquerysetintervalclearinterval
Ahmar Arshad
Ahmar Arshad

Reputation: 497

JavaScript setInterval is not stoping

I am running the JavaScript timer using setInterval(). I want to run the timer for 5 seconds then restart the timer from zero seconds and the same process should run for 3 times.

<!DOCTYPE html>
<html>
<head>
    <title>Jquery setinterval stop after sometime</title>
</head>
<body>

    <p>Counter: <span id="counter"></span></p>
    <p>Seconds: <span id="seconds"></span></p>

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            var start_secs;
            var counter = 0;
            function intervalFunc(){
                var seconds = 0;
                $('#counter').html(counter);
                start_secs = setInterval(function(){
                    $('#seconds').html(seconds);
                    if(seconds===5){
                        if(counter < 3){
                            intervalFunc();
                        }else{
                            console.log('else');
                            clearInterval(start_secs);
                            seconds=0;
                            return false;
                        }
                    }
                    seconds++;  
                }, 1000);
                counter++;
            }

            intervalFunc();
        });
    </script>


</body>

The above code timer works fine until counter value is less than 3 but after that setInterval() keeps running and doesn't stop even on using clearInterval().

Can anyone point out the problem in the given code that why setInterval() is not stopping after counter value is greater than or equal to 3 ?

Upvotes: 0

Views: 847

Answers (4)

Bilal Kazmi
Bilal Kazmi

Reputation: 179

As you may know now after the previous answers, you are calling setInterval many times thus creating many intervals that are impossible to clear. When you are calling the intervalFunc again inside it, it goes through the setInterval line and sets another Interval. Thus creating many intervals until the counter reaches 5 and clears ONLY ONE interval after the conditioning fails. Here is a tested code that can do it without any issues:

      $(document).ready(function() {
          var start_secs;
          var counter = 0;
          var seconds = 0;
          $('#counter').html(counter);
          $('#seconds').html(seconds);
          function increaseCounter(){
            counter+=1;
            $('#counter').html(counter);
          }

          var start_secs = setInterval(function(){
                  if(seconds==5){
                      seconds=0;
                      if(counter < 3){
                          increaseCounter();
                      }
                      else if(counter==3){
                          counter=0;
                          seconds=0;
                          $('#counter').html(counter);
                          $('#seconds').html(seconds);
                          clearInterval(start_secs);
                      }
                  }
                  $('#seconds').html(seconds);
                  seconds+=1;
              }, 1000);
      });

Tested it and it's working. I hope it works for you...

Upvotes: 0

ewwink
ewwink

Reputation: 19164

you only need to call setInterval once because it will continue running before you stop it.

$(document).ready(function() {
  var start_secs;
  var counter = 0;
  var seconds = 0;

  function intervalFunc() {
    if (seconds === 5) {
      seconds = 0;
      counter++;
      if (counter == 3) {
        // seconds = 5; // uncomment to show 5 instead of 0 when finished
        clearInterval(start_secs);
        console.log('Finish');
      }
    }
    else {
      seconds++;
    }
    $('#seconds').html(seconds);
    $('#counter').html(counter);
  }

  start_secs = setInterval(intervalFunc, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Counter: <span id="counter">0</span></p>
<p>Seconds: <span id="seconds">0</span></p>

Upvotes: 0

Mark
Mark

Reputation: 92461

There are a few problems. The main one is that start_seconds needs to be local to the function rather than declared outside the function — you want to control each interval independently within the function. The way you have it, you lose the references to the earlier timers. And you want to clear the interval when seconds == 5 regardless of whether the counter < 3 because you are starting a new one.

Something like this:

var counter = 0;
function intervalFunc(){
    var seconds = 0
    var start_secs = setInterval(function(){
        console.log(seconds)
        if(seconds===5){
            if(counter < 3){
                intervalFunc();
            }
            // after 5 times clear the interval
            // a new one is started if counter < 3
            clearInterval(start_secs);
            return            
        }
        seconds++;  
    }, 500);
    counter++;
}

intervalFunc();

Upvotes: 1

dRoyson
dRoyson

Reputation: 1507

Before calling the intervalFunc() you must clear your previous timer. Because every timer is assigned to the same variable, so the timer is running in the background and then there is no way to clear those timers.

Check the code with the changes:

<!DOCTYPE html>
<html>
<head>
    <title>Jquery setinterval stop after sometime</title>
</head>
<body>

    <p>Counter: <span id="counter"></span></p>
    <p>Seconds: <span id="seconds"></span></p>

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            var start_secs;
            var counter = 0;
            function intervalFunc(){
                var seconds = 0;
                $('#counter').html(counter);
                start_secs = setInterval(function(){
                    $('#seconds').html(seconds);
                    if(seconds===5){
                        clearInterval(start_secs);
                        if(counter < 3){
                            intervalFunc();
                        }else{
                            console.log('else');
                            seconds=0;
                            return false;
                        }
                    }
                    seconds++;  
                }, 1000);
                counter++;
            }

            intervalFunc();
        });
    </script>


</body>

Upvotes: 1

Related Questions