Functional programming technique to update the DOM. First, an array of states is made. Next, an update function is chosen. Lastly, the update function is passed to a bounded random recursive timing function. Using setTimeout assures that the update is non-blocking.
This timing function will execute the provided function at a random delay between the minMS and maxMS.
function setUpdateTimingConstructor(func, minMS, maxMS) {
return function anon() {
func();
let nextDelay = minMS + Math.random() * (maxMS - minMS);
setTimeout(anon, nextDelay);
}
}
These words should: Fast
function rotateText (elementId, states) {
let idx = 0;
if (!states.length) {
console.error("States array is empty.");
return () => {};
}
return function rotateTextAnon() {
const element = document.getElementById(elementId);
if (!element) {
console.error(`Element with id '${elementId}' not found.`);
return;
}
idx += 1;
idx %= states.length;
element.innerHTML = states[idx];
}
}
// usage
const states = [
'rotate',
'change',
'switch',
'swap'
];
const rotateDemo = rotateText('adjectives', states);
const rotateUpdater = setUpdateTimingConstructor(rotateDemo, 350, 550);
rotateUpdater();
This text should: appear and disapear
The function takes the id of the element to update and cycles from end-to-end of the state array.
function bounceText(elementId, states) {
let idx = 0;
let increasing = true;
if (!states.length) {
console.error("States array is empty.");
return () => {};
}
return function bounceTextAnon() {
const element = document.getElementById(elementId);
if (!element) {
console.error(`Element with id '${elementId}' not found.`);
return;
}
idx = (increasing) ? idx + 1 : idx - 1;
if (idx == 0 || idx == states.length - 1) {
increasing = !increasing;
}
element.innerHTML = states[idx];
}
}
// usage
const variations = makeTextSubstrings(changingEl.innerHTML);
const bounceChanging = bounceText('changing', variations);
const updater = setUpdateTimingConstructor(bounceChanging, 70, 140);
updater();
These numbers should jump randomly: randomly
function randomText (elementId, states) {
let idx = 0;
if (!states.length) {
console.error("States array is empty.");
return () => {};
}
return function randomTextAnon() {
const element = document.getElementById(elementId);
if (!element) {
console.error(`Element with id '${elementId}' not found.`);
return;
}
let nextIdx = Math.floor(Math.random() * states.length);
while(states.length > 1 && idx == nextIdx){
nextIdx = Math.floor(Math.random() * states.length);
}
idx = nextIdx;
element.innerHTML = states[idx];
}
}
// usage
const states = ['1', '2', '3', '4', '5', '6', '7'];
const randomNumbers = randomText('random', states);
const randomUpdater = setUpdateTimingConstructor(randomNumbers, 350, 380);
randomUpdater();