Tengo un código siguiente:
btn.onclick = function() { toast.classList.add('showToast') setTimeout(function() { toast.classList.remove('showToast') }, 3100) } Supongamos que en 0 s hago clic muchas veces en el botón, por lo que tal vez en 3.1 s recibo una gran cantidad de eliminación de manija en brindis, esto no es lo que espero porque tal vez en 3.2 s hago clic en el botón una vez más brindis desaparece inmediatamente en lugar de acción en 3.1 s. Quiero que los usuarios puedan hacer clic en el botón tantas veces como quieran, equivalente a que addClass() se maneje mucho tiempo, pero removeClass() solo se maneje una vez correspondiente a la última addClass() y al último clic. ¿Cómo puedo hacer eso, o tal vez podría darme otra forma de manejar esto, gracias
Parece que desea cancelar cualquier tiempo de espera aún activo cuando se vuelve a hacer clic en el botón. En ese caso, debe almacenar la ID del temporizador en una variable fuera de la función y luego llamar a clearTimeout antes de configurar el nuevo tiempo de espera.
let timerId; btn.onclick = function() { toast.classList.add('showToast') clearTimeout(timerId); timerId = setTimeout(function() { toast.classList.remove('showToast') }, 3100) } Tenga en cuenta que, como se muestra arriba, timerId es una variable global, pero esto no es lo ideal. Idealmente, este código está dentro de alguna función que significaría que timerId no contamina el alcance global. Pero eso depende de la información sobre cómo está diseñado su código que no nos muestra.
crear contador usando setInterval()
var counterHandle; var counter = 0; btn.onclick = function() { counter = 0; clearInterval(counterHandle); toast.classList.add('showToast'); counterHandle = setInterval(()=>{ counter +=1; console.log(counter); if(counter === 3){ toast.classList.remove('showToast'); clearInterval(counterHandle); } }, 1000); }cuando el botón se presiona muchas veces, el contador siempre será 0 y cuando el contador tiene un valor de 3, el comando se ejecutará