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()
}