Question

cuando lanzo en simultaneo la funcion iniciar y listar imagenes, obtengo un error tipo get en mi primera funcion, si lo inicio separadamente no ocurre este error, esto me hace pensar que los elementos de mi array no estan disponibiles para ambas funciones, que puedo hacer para que no pase esto

<img src="#" id="img">
<button onclick="barajear()">iniciar</button>
<button onclick="detener()">detener</button>
<button onclick="listar()">listar todas las imagenes</button>
<div id="seccion"></div>

<script type="text/javascript">
var files =['enero.jpg', 'febrero.jpg', 'marzo.jpg', 'abril.jpg', 'mayo.jpg'];
var contador = 0;
var intervalo;

function barajear(){
    console.log('inicio')
    img = document.getElementById('img');
    intervalo = setInterval(function(){
       img.setAttribute('src', 'clothes/'+files[contador]);
       img.height = 100;
       contador = contador +1;
       if (contador == files.length) {
          contador = 0;
       }

    }, 5000);
}

function detener(){
    clearInterval(intervalo)
}

function listar(){
    contador = 0;
    contenedor = document.getElementById('seccion');
    loop = setInterval(function(){

    elemento = document.createElement('img');
    resolucion = elemento.height=100;
        rutaImagen = elemento.setAttribute('src', 'clothes/'+files[contador]);
    contenedor.appendChild(elemento);

        contador = contador + 1;
    if(contador == files.length){
      clearInterval(loop);
    }    

    console.log(contenedor + contador);

    }, 5000);
}
</script>

output en consola
clothes/undefined:1 GET file:///F:/xamp/htdocs/local/beta/random/clothes/undefined net::ERR_FILE_NOT_FOUND

Answer 1

Estás usando la misma variable contador para las dos funciones, y además en la función listar, cuando compruebas si el contador ha llegado al final, no lo vuelves a poner a 0, solo cancelas el intervalo, por lo que llega un momento en el que ocurre esto:

• El valor de contador es files.length-1
• La función barajear aumenta el contador, que pasa a valer files.length
• La función listar también aumenta el contador, que pasa a valer files.length+1
• La función barajear comprueba si contador == files.length, pero ya no vale eso, porque la ha aumentado la función listar a files.length+1, por lo que ya se ha salido del tamaño del array y te da un valor undefined

Es lo que en programación se conoce como condición de carrera (race condition en inglés).

En este caso la solución es fácil: lo que debes hacer es usar una variable contador diferenciada para cada función.