Skip to main content

tengoTengo una galeriagalería de 9 imagenesimágenes las cuales tienen una capa de sombreado, lo.

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 codigo.

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 recienrecién empezar con la ejecucionejecución de la segunda imagen, ¿Como. ¿Cómo puedo hacer para que el codigocódigo espere a que termine de ejecutarse antes de ejecutarse nuevamente? esteEste es mi codigocó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() 
}

tengo una galeria de 9 imagenes 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 codigo 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 recien empezar con la ejecucion de la segunda imagen, ¿Como puedo hacer para que el codigo espere a que termine de ejecutarse antes de ejecutarse nuevamente? este es mi codigo

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

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

se añadieron 104 caracteres en el cuerpo
Origen Enlace

tengo una galeria de 9 imagenes 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 codigo 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 recien empezar con la ejecucion de la segunda imagen, ¿Como puedo hacer para que el codigo espere a que termine de ejecutarse antes de ejecutarse nuevamente? este es mi codigo

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

tengo una galeria de 9 imagenes 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 codigo 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 recien empezar con la ejecucion de la segunda imagen, este es mi codigo

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

tengo una galeria de 9 imagenes 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 codigo 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 recien empezar con la ejecucion de la segunda imagen, ¿Como puedo hacer para que el codigo espere a que termine de ejecutarse antes de ejecutarse nuevamente? este es mi codigo

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

Origen Enlace

Problema con el asincronismo en js

tengo una galeria de 9 imagenes 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 codigo 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 recien empezar con la ejecucion de la segunda imagen, este es mi codigo

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