In my code, an html button triggers a jQuery function (let's call it funcOne) which then calls another function (funcTwo) recursively to modify CSS in the DOM. The funcTwo function involves setTimeout() calls to create a blinking effect by delaying the CSS changes.
Here is an example of how funcOne looks:
function funcOne(stringOfNumbers){
//This function executes other tasks that do not interfere with funcTwo
someUnrelatedFunction();
funcTwo(time);
return;
}
An example of funcTwo would look like this:
function funcTwo(time){
if(time == ""){return true;}
var delay = time.charAt(0);
var numDelay = parseInt(delay);
setTimeout(function(){
$("#container").css("background-color", "white");
console.log("Changed to white");
}, 1000); //Arbitrary delay
setTimeout(function(){
$("#container").css("background-color", "black");
console.log("Changed to black");
}, numDelay); //Variable delay
time = time.substr(1);
return funcTwo(time);
}
Despite seeing both messages in the console, indicating that the script is running without any stack overflow errors, I'm encountering a problem. Both delays, the arbitrary and variable, are not functioning as intended - the #container immediately turns black without waiting for the delays.
I am seeking assistance to identify what I might be doing incorrectly. Any help or guidance would be highly appreciated.