Estoy tratando de crear una función simple cuando al hacer clic se produce una serie de cambios de estilo en un elemento.
Quiero agregar un retraso de 4 segundos entre los dos cambios de estilo que hago. He encontrado algunos métodos para agregar demoras antes y después de una función, pero no dentro de una función. ¿Cómo puedo lograr esto?
Mi código:
const btnEl = document.getElementById("btnel") const subtl = document.getElementById("chp1sub") document.getElementById("chp1sub").style.backgroundColor = "red"; btnEl.addEventListener("click", function(){ subtl.style.backgroundColor = "blue" // 4 second delay here before running next line subtl.style.transform = "translateY(-90px)" })Realmente agradecería cualquier consejo sobre esto
Simplemente puede usar el método setTimeout , ejecuta una función después del tiempo establecido en milisegundos. Para lograr lo que necesita, debe configurar una función anónima.
setTimeout(() => { /* Code to run after 4 seconds */ }, 4000) const btnEl = document.getElementById("btnel") const subtl = document.getElementById("chp1sub") document.getElementById("chp1sub").style.backgroundColor = "red"; btnEl.addEventListener("click", function(){ subtl.style.backgroundColor = "blue" setTimeout(() => { // 4 second delay here before running next line subtl.style.transform = "translateY(-90px)" }, 4000) })Simplemente puede usar CSS Transition-Delay dentro de esa función
Cree una función interna anónima llamada por setTimeout
const btnEl = document.getElementById("btnel") const subtl = document.getElementById("chp1sub") document.getElementById("chp1sub").style.backgroundColor = "red"; btnEl.addEventListener("click", function(){ subtl.style.backgroundColor = "blue" setTimeout(function(){ subtl.style.transform = "translateY(-90px)" },4000) })Alternativamente, debido a que esta es una transición CSS, puede usar el retraso de transición CSS con esta traducción.