How to stop the setInterval()?

Question

below is the script of setInterval() and clearInterval() ..

I have searched for clearInterval() to stop the setInterval() ... I implemented that code, but it is not working..

What i am trying to achieve here is that, for example, there are 8 predator and 3 prey.. The setInterval will start when there is more Predators than Prey, so the Prey will reduce 3 while the Predator will increase 3 more.. And when the number of prey hit 0.. The predator should stop increasing since there is no more prey left..

The problem here is that, when the prey hit 0, the predator is still increasing.. I added in clearInterval() but it is not working.. May i know what went wrong?

<script>
    function startAni() {
        if ((document.getElementById('amount').value) >= (document.getElementById('amount5').value)) {
            alert("Predator is more than prey! FRENZY TIME!");
            var interval = setInterval(function () {
                Remove3(), removevalue3(), Add(), addvalues();
                if (document.getElementById('amount5').value = "0") {
                    alert("No more Prey!");
                    clearInterval(interval);
                }
            }, 5000);
        } else {
            alert("Prey is more than Predator! Revenge time!")
        }
    }
</script>

Many thanks in advance for helping!

Answer 1

You need to ensure that there is an actual input on the DOM with the id amount5 because if there is then document.getElementById('amount5').value = "0" will be true and will clear your interval immediately ...

But

if (document.getElementById('amount5').value = "0") {

should be

if (document.getElementById('amount5').value == "0") {

in javascript you use double equals ( == ) to compare.

Answer 2

This:

if(document.getElementById('amount5').value = "0"){

You should use == instead of = , otherwise your condition is always truthy. Having said that, that statement would immediately kill the timer.

Answer 3

Another way of looking at it is using setTimeout instead of setInterval and clearInterval :

function doAdd() {
    Remove3(), removevalue3(), Add(), addvalues();
    if (document.getElementById('amount5').value = "0") {
        alert("No more Prey!");
        // thats it, no more recursion as your stop condition has been met
    }
    else {
        setTimeout(doAdd, 5000); // continue as there is more to be done
    }
}
setTimeout(doAdd, 0); // start it off

Answer 4

You made mistake on setting the interval variable scope. You should define it as global variable.

If you define it in "startAni" function, the variable cannot be accessed by nested function in "startAni" function.

You should define as:

<script>
    var interval;//define it here
    function startAni() {
        if ((document.getElementById('amount').value) >= (document.getElementById('amount5').value)) {
            alert("Predator is more than prey! FRENZY TIME!");
            interval = setInterval(function () {  //do not redefined interval as var just use it here
    ....

</script>