Why does my setInterval loop go another round before exiting even though I have the termination in the beginning

Question

Sorry for gore title.. But if you take a look at this code

var interval = setInterval(function () {
            if (start == false || score_met == true) {
                clearInterval(interval);
            }

            // call generation again for each generation, passing in the previous generations best offspring
            best_offspring = generation(best_offspring, characters, target_text, mutation_rate, amount_offspring);
            document.getElementById("output_text").value = best_offspring;
            document.getElementById("generations").value = generations;
            }, delay);
    });

This will loop untill the score is met or if I change the value of start . My reset button code looks like this

        //resets
    $( "#reset" ).click(function() {
            start = false;
            score_met = false;
            generations = 0;
            best_offspring = "";

            document.getElementById("start_text").value = "";
            document.getElementById("characters").value = " abcdefghijklmnopqrstuvwxyz";
            document.getElementById("target_text").value = "methinks it is like a weasel";
            document.getElementById("output_text").value = "";
            document.getElementById("mutation_rate").value = 5;
            document.getElementById("amount_offspring").value = 100;
            document.getElementById("delay").value = 50;
        });
    });

So when I click reset my loop should end right? But it seems like it does another loop before it terminates. Why is that? I was thinking that you could do something like

$( interval ).ready(function() {...});

but then Im quite unsure what to put instead of interval there.

Answer 1

Explaining your code.

var interval = setInterval(function () {
        if (start == false || score_met == true) {
            clearInterval(interval);
        }

        // call generation again for each generation, passing in the previous generations best offspring
        best_offspring = generation(best_offspring, characters, target_text, mutation_rate, amount_offspring);
        document.getElementById("output_text").value = best_offspring;
        document.getElementById("generations").value = generations;
        }, delay);

You are clearing the interval that is fine, But this part of code has already started executing , so the part of the code after if will execute at this moment . So put it inside a else and you must be fine.

var interval = setInterval(function () {
        if (start == false || score_met == true) {
            clearInterval(interval);
        }
        else{
          // call generation again for each generation, passing in the previous generations best offspring
          // your stuff here
         }           
        }, delay);

Answer 2

Simply do clearInterval(interval); return; clearInterval(interval); return; to exit the function after clearing. Clearing prevents the next call, it will still continue the current call until it terminates:

var interval = setInterval(function () {
    if (start == false || score_met == true) {
        clearInterval(interval);
        return;
    }
    /* ... */
}, 1000);

You could also wrap the rest of your code in an else , which would also skip the rest of the code and terminate the function naturally.