Tengo un código simple como en el fragmento a continuación para tener una alerta cada vez que se hace clic en un botón y se muestra una alerta, que funciona bien pero con ciertos inconvenientes (sepa que así es como funciona setTimeout ).
Aquí, cuando hace clic en el botón 2,3,4 veces, la alerta se muestra solo muchas veces. Pero quiero alertar solo 1 vez que se llama desde el 1er clic e ignorar más clics hasta que se completen 3 segundos para el 1er clic.
function alertBtn() { setTimeout(alertFunc, 3000); } function alertFunc() { alert("Alert is clicked so remain alerted"); } <button onclick="alertBtn()">Alert me</button>¿Es posible con JavaScript puro? Puede ser similar al método que usa SO como si no pudiéramos comentar nuevamente dentro de 5 segundos (o algo así), el botón está un poco deshabilitado para ese intervalo de tiempo. Tipo de barrera para 5 seg.
Puede usar clearTimeout() para lo que cancela un tiempo de espera previamente establecido llamando a setTimeout()
let time; let clicked = false; function alertBtn() { if (!clicked){ clicked = true; clearTimeout(time); time = setTimeout(alertFunc, 3000); } } function alertFunc() { alert("Alert is clicked so remain alerted"); clicked = false; } <button onclick="alertBtn()">Alert me</button> clearTimeout - https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout
Tal vez algo como esto:
let clickedOnce = false; function alertBtn() { if (!clickedOnce) { clickedOnce = true; setTimeout(alertFunc, 3000); } } function alertFunc() { alert("Alert is clicked so remain alerted"); clickedOnce = false; } <button onclick="alertBtn()">Alert me</button>Parece que estás buscando hacer algo llamado aceleración . Aquí hay un ejemplo de cómo implementarlo:
const throttle = function (fn, delay) { let timeout; return function (...args) { if (!timeout) { const returnVal = fn.apply(this, args); timeout = setTimeout(() => { timeout = undefined; }, delay); return returnVal; } }; }; Esa función de throttle le permite transformar una función normal en una función limitada , que solo se ejecutará la primera vez que se llame en un tiempo de delay determinado (especificado en milisegundos para que coincida con el comportamiento de setTimeout ).
Funciona creando una nueva función que establece un tiempo de espera la primera vez que se llama y llama a la función inicial. Luego, si se vuelve a llamar a la función limitada antes de que finalice el tiempo de espera, no volverá a llamar a la función inicial.
Si desea acelerar su función en 3 segundos, debe pasar el valor 3000 como argumento de delay para que el tiempo de espera creado dure 3 segundos. Puede crear solo una función acelerada pasando una función anónima a throttle , como esta:
const throttle = function (fn, delay) { let timeout; return function (...args) { if (!timeout) { const returnVal = fn.apply(this, args); timeout = setTimeout(() => { timeout = undefined; }, delay); return returnVal; } }; }; const alertBtn = throttle(function () { alert("Alert is clicked so remain alerted"); }, 3000); <button onclick="alertBtn()">Alert me</button>