I'm trying to add the class is-ending with a setTimeout delay however I can see that it keeps running even if I click other buttons.
What the best way to achieve that? my code works but the clearTimeout doesn't stop the clearTimeout.
toggleContent(inputEl, contentEl) {
const maxValue = inputEl.closest('.frequency-selector-block').dataset.maxValue;
if (inputEl.value === maxValue) {
//add class to content if successfull otherwise remove it
setTimeout(function () {
contentEl.classList.add("is-visible");
}, 1500);
} else {
contentEl.classList.remove("is-visible");
}
}
setCorrectText(inputEl, inputRangeContainer, selectionText) {
const inputValue = Number(inputEl.value);
let myTimeout;
if (inputValue < 1) {
//if value of the input range is 0 delete set timeout
clearTimeout(myTimeout);
inputRangeContainer.classList.remove("is-ending");
inputRangeContainer.classList.add("is-starting");
selectionText.innerText = selectionText.dataset.option1Text;
}
if (inputValue >= 1 && inputValue <= 2) {
//if value of the input range is 1 delete set timeout
clearTimeout(myTimeout);
inputRangeContainer.classList.remove("is-starting");
inputRangeContainer.classList.remove("is-ending");
selectionText.innerText = selectionText.dataset.option2Text;
}
if (inputValue > 1) {
inputRangeContainer.classList.remove("is-starting");
myTimeout = setTimeout(function () {
inputRangeContainer.classList.add("is-ending");
}, 1500);
selectionText.innerText = selectionText.dataset.option3Text;
}
}
Every time setCorrectText is called, let myTimeout redeclare myTimeout as undefined, so clearTimeout(myTimeout) equals to clearTimeout(undefined), timer created before can never be stopped. delcare myTimeout as property of inputRangeContainer will fix the problem.
setCorrectText(inputEl, inputRangeContainer, selectionText) {
const inputValue = Number(inputEl.value);
// let myTimeout;
if (inputValue < 1) {
//if value of the input range is 0 delete set timeout
clearTimeout(inputRangeContainer.myTimeout);
inputRangeContainer.classList.remove("is-ending");
inputRangeContainer.classList.add("is-starting");
selectionText.innerText = selectionText.dataset.option1Text;
}
if (inputValue >= 1 && inputValue <= 2) {
//if value of the input range is 1 delete set timeout
clearTimeout(inputRangeContainer.myTimeout);
inputRangeContainer.classList.remove("is-starting");
inputRangeContainer.classList.remove("is-ending");
selectionText.innerText = selectionText.dataset.option2Text;
}
if (inputValue > 1) {
inputRangeContainer.classList.remove("is-starting");
inputRangeContainer.myTimeout = setTimeout(function () {
inputRangeContainer.classList.add("is-ending");
}, 1500);
selectionText.innerText = selectionText.dataset.option3Text;
}
}
myTimeout is a local variable to the setCorrectText function.
With the way your function is written, your timeout is never going to get cleared. Because when the if blocks that could eventually clear it are executed, myTimeout is undefined.
I suggest you store your timeouts in a property of your class, or in an object that is passed as a parameter of the setCorrectText function, instead of a local variable.