0

Tengo el siguiente código y me gustaría que la función cambioId al ser llamada en los condicionales tarde varios segundos en aparecer; ya intenté de varias formas, agregando un setTimeout y, sin embargo, no me sirvió. Es decir quiero que la imagen desaparezca rápido y el cambio de id tarde en hacerse, por ende, tarda en aparecer.

Además, otro error que no puedo lograr solucionar es que cada vez que se hace clic en la imagen la maquina de escribir superpone los textos y se suman los tiempos de la constante escritura; intenté resolverlo con un clearSetTimeOut pero tampoco pude.

En resumen, me gustaría que la función cambio de ID tenga un retardo de dos segundos y que la constante escribir, al ser llamada, no se sumen los datos que esta tiene cada vez que se llama.

let imag = document.getElementById("imag");
let imag2 = document.getElementById("imag2");
let contadorClick = 0;
function cambioId(idACambiar = "", _idNuevo = "") {
    let a = idACambiar; 
    let b = _idNuevo;
    console.log(a);
    console.log(b);
    a.id = b;   
    /* setTimeout(function(){cambioId(idACambiar, _idNuevo)},5000); */
} 
const escritura = (texto = "", tiempoEscritura = 0, tiempoBorrado = 0, etiquet = "") => {
    let contador = 0;
    etiquet.innerHTML = "";
    let j = texto.length;
    let caracteres = texto.split("");
    const escribir = function() {
     
      if (contador == texto.length) {
  
        etiquet.style.borderRightColor = "black";
        etiquet.innerHTML = texto.substring(0, j);
        j--;
        if (j < 0) {
          j = texto.length;
          contador = 0;
        }
        setTimeout(escribir, tiempoBorrado);
      } else {
        etiquet.innerHTML += caracteres[contador];
        contador++;
        let variable = (texto.length - 43);
        if (contador >= variable & contador <= texto.length & contador % 2 == 0) {
          console.log("ahora aparezco");
          etiquet.style.borderRightColor = "white";
        } else {
          etiquet.style.borderRightColor = "black";
        }
        setTimeout(escribir, tiempoEscritura);
      }
    };
    escribir();
  }

imag.addEventListener("click", function cambiarImag() {
    contadorClick++;
    console.log(contadorClick);
    if(contadorClick>=4){
        contadorClick = 0;
    }
    if(contadorClick%2 != 0) {
        document.getElementById("uno").id = "unoDespues";
        cambioId(this, "imag2");
        document.getElementById("padreOculto").id = "padreVisible";
        escritura(" Hola!!!                               ", 80 , 10, document.getElementById("texto"));
        console.log(cambioId);
      }

    else {
        cambioId(this, "imag");
        document.getElementById("unoDespues").id = "uno";
        document.getElementById("padreVisible").id = "padreOculto";
    }
})
#imag {
    width: 12em;
    height: 50vh;
    margin-top: 10em;
    border-radius: 60%;
    border: 2px solid rgb(255, 255, 255);
 }
 #imag2 {
    width: 5em;
    margin-left: 50%;
    border: 1px solid rgb(255, 255, 255);
    height: 5em;
    margin-top: 10em;
    border-radius: 0;
 }
#padreOculto {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
}
#padreVisible {
    opacity: 1;
    margin-left: 1.5em;
    width: 13em;
    height: 50vh;
    background-color: wheat;
}
  #uno {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas: 
    "contit imag imag"
    "contit imag imag";
    background-color:rgb(255, 255, 93);
}
#unoDespues {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 0.5fr 2.5fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas: 
    "contit imag imag"
    "contit padreVisible padreVisible";
    background-color:rgb(255, 255, 93);
}
<div id="padreOculto"><p id="texto"></p></div>
 <img src="https://www.semana.com/resizer/DWerBFY8O0Tc0ZsQnFpA1LJXOR0=/1200x675/filters:format(jpg):quality(50)//cloudfront-us-east-1.images.arcpublishing.com/semana/V3EVP6ZUEZFY7AIGESM76I43GE.jpg" alt="" id="imag">

3
  • Tu código está incompleto y con errores. Por favor edita la pregunta para agregar todo el HTML relevante para poder ejecutar y corrige el problema de la variable imagen, creo que debería ser solo imag.
    – Triby
    Commented el 27 feb. 2022 a las 1:33
  • @Triby si, tenias razon. Ahi lo edité y creo que ya esta todo bien Commented el 27 feb. 2022 a las 2:12
  • No, faltan elementos HTML; al ejecutar el fragmento de código y hacer clic en la imagen puedes ver errores en la consola, supongo que porque no hay elementos con ID imag2, uno y unoDespues
    – Triby
    Commented el 27 feb. 2022 a las 2:21

1 respuesta 1

1

Puedes agregar un setTimeout en una Promise y usar async await o then para consumir la promesa como se ve en el ejemplo:

const btn = document.querySelector('#btn');
const log = document.querySelector('#log');
const delay = (s) => {
  return new Promise((resolve) => setTimeout(resolve, s * 1000));
};

btn.addEventListener('click', async() => {
  log.textContent = '🕗 waiting...';
  await delay(2);
  log.textContent = '😀 finished!';
});
<button id="btn">click me</button>
<p id="log"></p>

3
  • Gracias!! La verdad no conozco de promesas, estoy aprendiendo Javascript, hasta ahora no llegue a eso, ahora me interiorizo en el tema para entenderlo, mil gracias. Y por casualidad el tema de que se me suman los tiempos cada vez que llamo a "escribir" tenes idea por que sucede Commented el 27 feb. 2022 a las 2:04
  • El error es por que una ves que se ejecuta tu funcion escribir hay un if y un else en ambos casos realizas una operacion segun el contador hasta ahi esta todo bien, el problema esta cuando usas un setTimeout con el tiempo borrado y pasas la funcion escribir nuevamente entonces ejecutas la funcion escribir 2 veces. La solucion es agregar el codigo que puse de ejemplo reemplazando el setTimeout(escribir, tiempoBorrado). Commented el 27 feb. 2022 a las 2:32
  • Tambien es bueno recalcar que en cada funcion que uses await no olvides agregar async como se ve en el ejemplo. Puedes ver mas como usar una async function aqui Commented el 27 feb. 2022 a las 2:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.