0

Básicamente estoy intentado hacer mas de un contador de forma simultanea. Es decir :

 <div id="time0"></div>
    <div id="time1"></div>
    <div id="time2"></div> 

    var cntr1 = 1;
    var x = [300,200,400];
    for (let index = 0; index < x.length; index++) {
        var x = setInterval(function() {
            document.getElementById("time"+index).innerHTML = x[index]+= index;  
        }, 1);
    }

Que por cada milisegundo, vaya sumando a cada posición del Array 1 en este caso. Pero soy incapaz de hacerlo funcionar de esa manera, no sé en que me estoy equivocando.

1
  • 1
    estás declarando tu var x dos veces. Commented el 21 jul. 2019 a las 19:05

2 respuestas 2

1

Además de estar declarando tu var x dos veces cuando estás seleccionando dentro del setInterval a tu elemento con id time0 le estás sumando el valor de index que en la primera iteración vale por su puesto 0, entonces todo el tiempo estaría incrementando +0, por otro lado para el ejemplo que muestras puede parecer imperceptible pero cada mili segundo de tu intervalo de tiempo estás haciendo query a tu DOM innecesariamente y eso es considerado mala práctica. Esta sería la versión adecuado a lo que buscas:

  1. Tenemos el array de enteros en const array.
  2. Luego utilizando querySelectorAll seleccionará todos los elementos del DOM con la etiqueta div y el id que empiece con el prefijo time, es decir <div id="time0"></div>, <div id="time1"></div> y <div id="time2"></div> esto nos devuelve un NodeList la cual es guardada en la variable const divs.
  3. Luego se itera esta NodeList usando la función forEach que por cada iteración recibe el elemento y su indice en la NodeList en la función anónima (div, index), dentro de esta función anónima se ejecuta la función setInterval que dentro de ella tiene otra función anónima que por cada div que se está iterando y usando su propiedad innerHTML inserta el valor de la variable array (en su indice respectivo que se está iterando) sumándole + 1 cada intervalo de tiempo de 1 milisegundo.

De esta forma evitamos de buscar cada milisegundo document.getElementById que aunque parezca imperceptible estás usando memoria innecesariamente que como mencione antes es una mala práctica.

// var cntr1 = 1
const array = [300, 200, 400]

const divs = document.querySelectorAll('div[id^="time"]')

divs.forEach((div, index) => {
  setInterval(() => {
    div.innerHTML = array[index]++;
  }, 1)
})
<div id="time0"></div>
<div id="time1"></div>
<div id="time2"></div>

1
  • Tu respuesta sería mejor si incluyeras una breve descripción de los características que has incluido en tu código que no están incluidas en el código del AP.
    – Rubén
    Commented el 21 jul. 2019 a las 23:50
0

Como se mencionó en la respuesta previa un problema del código, de hecho podríamos decir que es el problema principal, es que el código está sobre escribiendo la variable x. Para que funcione el código la segunda declaración no se requiere en este caso en el sentido de asignar el id del proceso que devuelve setInterval a una variable pues en el código de la pregunta no se usa.

Otro problema es que estás usando el valor del iterador index como el incremento a realizarse en cada intervalo siendo que el valor inicial de este es 0.

Los cambios mínimos a realizar en el código de la pregunta podrían ser

  1. Eliminar el segundo var x =
  2. Cambiar += index por += Math.max(1,index)

var cntr1 = 1;
var x = [300, 200, 400];
for (let index = 1; index <= x.length; index++) {
  setInterval(function() {
    document.getElementById("time" + index).innerHTML = x[index] += Math.max(1,index);
  }, 1);
}
<div id="time0"></div>
<div id="time1"></div>
<div id="time2"></div>


Referencias

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.