1

Tengo una galería de 9 imágenes las cuales tienen una capa de sombreado.

Lo que estoy tratando de hacer es que cada 2 segundos esa capa se quite de manera aleatoria a cualquiera de las 9 imagenes, pasado los 2 segundos la capa vuelve a introducirse a la imagen a la que se le quito y se escoge de manera aleatoria otra imagen.

El código funciona bien pero tengo el problema de que, por ejemplo, si quiero que este proceso suceda 10 veces lo hace al mismo tiempo en vez de esperar a que termine de ejecutarse la primera imagen para recién empezar con la ejecución de la segunda imagen. ¿Cómo puedo hacer para que el código espere a que termine de ejecutarse antes de ejecutarse nuevamente? Este es mi código:

const imagen0 = document.getElementById("0")
const imagen1 = document.getElementById("1")
const imagen2 = document.getElementById("2")
const imagen3 = document.getElementById("3")
const imagen4 = document.getElementById("4")
const imagen5 = document.getElementById("5")
const imagen6 = document.getElementById("6")
const imagen7 = document.getElementById("7")
const imagen8 = document.getElementById("8")
let list = [imagen0, imagen1, imagen2, imagen3, imagen4, imagen5, imagen6, imagen7, imagen8]
let i


function sombreado () {
  let randomNumber = Math.floor(Math.random() * 8)

  let elementOfList = list[randomNumber]

  elementOfList.classList.add("claro")
  
  setTimeout(function(){
    elementOfList.classList.remove("claro")
  },2000)
}


for (i = 0; i < 10; i++){
  sombreado() 
}

1 respuesta 1

1

Claro, la asincronía es eso mismo, poder ejecutar varios procesos por separado en paralelo. Habría que controlar bien esos callback. Yo propondría algo de recursividad:

(function(){

  // Le añadimos un parámetro a la función 'sombreado' para controlar las iteraciones.
  function sombreado(index) {
    
    // Para la primera iteración, inicializamos 'index' a 0.
    if (index == null)
      index = 0;
  
    console.log('Iteración ' + index + ' en "sombreado()"');
    
    // Esta es la simulación de ejecución asíncrona.
    setTimeout(() => {
    
      console.log('Código asíncrono ejecutado.');
      
      // Una vez ejecutado el código asíncrono comprueba el número de iteraciones
      // y ejecuta de nuevo la función 'sombreado' sumando 1 a 'index'.
      if (index < 10)
        sombreado(++index);
    
    }, 2000);
  
  }
  
  sombreado();

}());

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.