Estoy tratando de agregar que la clase está terminando con un retraso de setTimeout; sin embargo, puedo ver que sigue ejecutándose incluso si hago clic en otros botones.
¿Cuál es la mejor manera de lograr eso? mi código funciona pero clearTimeout no detiene 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; } }Cada vez que se llama a setCorrectText , let myTimeout redeclare myTimeout como undefined , de modo que clearTimeout(myTimeout) igual a clearTimeout(undefined) , el temporizador creado antes nunca se puede detener. delcare myTimeout como propiedad de inputRangeContainer solucionará el problema.
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 es una variable local para la función setCorrectText . Con la forma en que está escrita su función, su tiempo de espera nunca se borrará. Porque cuando se ejecutan los bloques if que eventualmente podrían borrarlo, myTimeout no está definido.
Le sugiero que almacene sus tiempos de espera en una propiedad de su clase, o en un objeto que se pasa como parámetro de la función setCorrectText , en lugar de una variable local.