soy un novato
¿Cómo llamo a una función por una cantidad de tiempo determinada, digamos 3000 milisegundos? Probé setInterval y setTimeout pero no funcionan.
if (budgeting === '' || budgeting.indexOf('e') > -1 || budgetValue < 0) { let errorHandler = document.createElement('div'); let textErrorHandler = document.createTextNode('Oops! The balance you entered is invalid. Try again!') errorHandler.style.width = '500px'; errorHandler.style.height = '20px'; errorHandler.style.background = 'coral'; errorHandler.style.float = 'left'; errorHandler.appendChild(textErrorHandler); document.body.append(errorHandler); }Lo anterior es mi código actualmente. Lo que estoy tratando de hacer es mostrar un cuadro de mensaje de error durante 3 segundos (3000 milisegundos), pero quiero que solo se muestre cada vez que ocurra el error, es decir, solo una vez.
Este código puede funcionar:
setInterval(() => {console.log("work")}, 3000);Al mostrar el error, establezca un tiempo de espera para ocultarlo nuevamente después de un intervalo. Si se está ejecutando un tiempo de espera al configurar el tiempo de espera, bórrelo y configure uno nuevo.
La siguiente es una implementación básica. Se puede hacer clic en el botón "Mostrar error" tantas veces como sea necesario, solo mostrará un mensaje, solo establecerá un tiempo de espera a la vez y solo permanecerá durante el intervalo especificado después del último clic:
let showError = (() => { let timeoutID; return () => { let el = document.getElementById('err0'); el.style.visibility = 'visible'; // Clear timeout if one might be running if (timeoutID) clearTimeout(timeoutID); // Set timer for 1,000 ms (1 second), clear timeoutID when finished timeoutID = setTimeout(()=>{ el.style.visibility = 'hidden'; timeoutID = null; }, 1000); }; })(); #err0 { visibility: hidden; color: red; } <button onclick="showError()">Show error</button> <span id="err0">Error</span>