Pausing and changing speeds causes weird behaviour

[Haemp]

Replicate

• Start reading at 200
• Pause
• Change reading speed to 400
• Resume

It it is flashing a lot faster than 400 and sometimes maybe even refreshing some words.

[RossUK88]

I also had that with mine, also after the speed change I could not re-pause it.

I changed the stopSpritz function (Around line 177) to this:

function stopSpritz() {
        for(var i = 0; i < spritz_timers.length; i++) {
            //clearTimeout(spritz_timers[i]);
            clearTimeouts();
        }
        document.getElementById("spritz_toggle").textContent = "Play";
        running = false;
    }

Which seems to remove these bugs.

EDIT: Does not stop the flashing bug, but I have noticed that when you pause and press play again, the running variable gets reset to false and therefore starts a 2nd instance of the startSpritz function adding another timer in which is a few words behind/infront. Looking into a fix now

[AndreasBriese]

The strange behaviour can be stopped by using the allready existing clearTimeouts() all over the script instead of having the spritz_timers Array beside it.

function clearTimeouts() {
    var id = window.setTimeout(function () {}, 0);
    while (id--) {
        window.clearTimeout(id);
    }
}

function spritz(selection) {
    clearTimeouts();
    var wpm = parseInt(document.getElementById("spritz_selector").value, 10);
    if (wpm < 1) {
        return;
    }
    if (selection) {
        spritzify(selection);
    }
}

function spritzify(input) {
    // changed ms_per_word from float to (float) func
    var ms_per_word = function () {
        return (60000 / parseInt(document.getElementById("spritz_selector").value, 10));
    };
(...)
    // get rid of  spritz_timer-Array
(...)
    function startSpritz() {

        document.getElementById("spritz_toggle").style.display = "block";
        document.getElementById("spritz_toggle").textContent = "Pause";

        running = true;

        setInterval(function () {
            updateValues(currentWord);
            currentWord++;
            if (currentWord >= all_words.length) {
                currentWord = 0;
                stopSpritz();
            }
        }, ms_per_word());
    }

    function stopSpritz() {
        clearTimeouts();
        document.getElementById("spritz_toggle").textContent = "Play";
        running = false;
    }

document.getElementById("spritz_selector").addEventListener("change", function (e) {
    clearTimeouts();
    document.getElementById("spritz_toggle").textContent = "Play";
});