Why does my setInterval loop go another round before exiting even though I have the termination in the beginning
<p>Sorry for gore title.. But if you take a look at this code </p>

<pre><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);
    });
</code></pre>

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

<pre><code>        //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;
        });
    });
</code></pre>

<p>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 </p>

<p><code>$( interval ).ready(function() {...});</code></p>

<p>but then Im quite unsure what to put instead of interval there. </p>