JavaScript setInterval is not stoping

4228 views javascript
2

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 ?

answered question

May be you should use set timeout

2 Answers

1

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>

posted this
10

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();

posted this

Have an answer?

JD

Please login first before posting an answer.