i try to making web typing test.
so there is a button to reload function().
this function have script randoming words from string, and validate every user input to randomed words.

the randoming words script works perfectly, but the keyup script still executed.

var StopFunc;
function validationWords(StringFromPool){   
    // randomingWords function here   
    // script for focus to div
    $(".words-pool-container").on("keyup", function(e){
        //script for only accept a-z, space, and backspace
        // script for loop and if input keyup[i] == stringrandomwords[i] 
    })

 StopFunc = setTimeout(function(){validationWords(StringFromPool)}, 600)
}

function domReady(){
    StringFromPool=word();
    validationWords(StringFromPool);
}

$(document).ready(domReady)

$(document).ready(function(){
    // reload function button
    $(document).on("click", "#reload-btn", function(){
        clearTimeout(StopFunc);
        domReady();
    })
})

i do compare userinput and string based index. but when i press button reload, the index like looping. when i press once char, the index jump based on how many i click the reload button.

anyone know what i've missing here?