How to stop the setInterval()?

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!

Answers


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.


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.


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

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>

Need Your Help

Binding to DataGridTemplateColumn using style applied within DataTemplate?

wpf xaml data-binding styles datatemplate

I have a ComboBox that composes a DataTemplate, and I'm having trouble binding its IsEnabled property to the IsReadOnly property on the templated DataGridTemplateColumn.

Any benefit to explicitly dropping local temporary tables at the end of a stored procedure?

sql sql-server tsql

Consider the following psuedo T-SQL code (performed by a stored procedure):