1

Necesito mostrar varias cuentas atrás a la vez. Los datos se tomarán de una base de datos y podrá ser una sóla cuenta o más de una. A continuación pongo un ejemplo:

//var a = [4, 5, 6];
var a=[];
var b={};
for(var i=3;i<6;i++)
{
  b = {segundos: (i+1), elemento: 'demo' + (i+1)};
  a.push(b);
}

function mifun(X)
{
  if(X.segundos>0) 
  {
    document.getElementById(X.elemento).innerHTML = X.segundos;
    X.segundos--;
  }
  else document.getElementById(X.elemento).innerHTML = "Cuenta finalizada";
}

setInterval(function(){mifun(a[0]);},1000);
setInterval(function(){mifun(a[1]);},1000);
setInterval(function(){mifun(a[2]);},1000);
    	
<span id=demo4></span><br>
<span id=demo5></span><br>
<span id=demo6></span>

Esto es un pequeño ejemplo. Los datos se obtienen en PHP y luego los paso a un vector en JavaScript. El tamaño del vector podrá variar en función de la información guardada.

En este caso llamo a la función setInterval en tres ocasiones (a[0], a[1] y a[2]). Pero el tamaño real del vector no será siempre el mismo. ¿Cómo se podría llamar a la función setInterval sin tener que escribir esas 3 últimas líneas?

He probado a meterla en un bucle como el siguiente pero no funciona:

for(var i=0;i<a.length;i++) 
    setInterval(function(){mifun(a[i]);},1000);
2
  • 1
    ¿Qué o cómo no funciona cuando pones las llamadas en un bucle?
    – Alvaro Montoro
    Commented el 1 jul. 2017 a las 11:14
  • No funciona, no hace la cuenta atrás correctamente. Si por ejemplo pongo esto: for(var i=0;i<a.length;i++) setInterval(function(){mifun(a[i]);},1000); Verás que no se ejecuta correctamente, no sale nada en pantalla.
    – Juaqui
    Commented el 1 jul. 2017 a las 12:08

2 respuestas 2

0

El problema que tienes es que cuando lo pones en un bucle, se recorre el array con el índice i, pero cuando se llama a setInterval el valor de i ya no es el mismo (se ha movido el bucle), lo cual va a causar que fallen las cuentas.

Una posible solución sería cambiar la definición de la variable, para que en lugar de ser con var sea con let y ya te funcionará el bucle:

//var a = [4, 5, 6];
var a=[];
var b={};
for(var i=3;i<6;i++)
{
  b = {segundos: (i+1), elemento: 'demo' + (i+1)};
  a.push(b);
}

function mifun(X)
{
  if(X.segundos>0) 
  {
    document.getElementById(X.elemento).innerHTML = X.segundos;
    X.segundos--;
  }
  else document.getElementById(X.elemento).innerHTML = "Cuenta finalizada";
}

for(let i=0;i<a.length;i++) 
    setInterval(function(){mifun(a[i]);},1000);
<span id=demo4></span><br>
<span id=demo5></span><br>
<span id=demo6></span>

Con let se está especificando que el ámbito de la variable es sólo en el bloque en que se llama (en tu caso, el bucle for) y no la función completa, funcionando como una clausura, por lo que no tienes el problema de que i no esté bien definida después del for.


Si no quieres usar let porque quieres darle un soporte más amplio a navegadores antiguos (como sugiere Arnau Castellví en los comentarios), lo que puedes hacer es crear tu propia clausura y seguir usando var:

//var a = [4, 5, 6];
var a=[];
var b={};
for(var i=3;i<6;i++)
{
  b = {segundos: (i+1), elemento: 'demo' + (i+1)};
  a.push(b);
}

function mifun(X)
{
  if(X.segundos>0) 
  {
    document.getElementById(X.elemento).innerHTML = X.segundos;
    X.segundos--;
  }
  else document.getElementById(X.elemento).innerHTML = "Cuenta finalizada";
}

for(var i=0;i<a.length;i++) {
  (function(i) {
    setInterval(function(){mifun(a[i]);},1000);
  })(i);
}
<span id=demo4></span><br>
<span id=demo5></span><br>
<span id=demo6></span>

3
  • Ojo con el let, aun hay muchos navegadores que no lo conocen, androids antiguos y tal... Commented el 1 jul. 2017 a las 13:03
  • @ArnauCastellví gracias por la nota, añadí una alternativa con un pequeño ejemplo usando clausuras en lugar de let
    – Alvaro Montoro
    Commented el 1 jul. 2017 a las 13:06
  • Muchas Gracias! No entiendo muy bien el concepto de clausura. Según he leído es cuando una función que está declarada dentro de otra función, tiene acceso a las variables de la primera función. En este caso hay que poner la función principal entre paréntesis y poner entre paréntesis también la variable "i" para que tenga acceso a ella y no se modifique su valor. Es así?
    – Juaqui
    Commented el 3 jul. 2017 a las 10:50
0

Otra solución es que tu bucle for tenga una closure pasandole i, esto hará que i este en el mismo contexto cuando ejecuta el setInterval.

//var a = [4, 5, 6];
var a=[];
var b={};
for(var i=3;i<6;i++)
{
  b = {segundos: (i+1), elemento: 'demo' + (i+1)};
  a.push(b);
}

function mifun(X)
{
  if(X.segundos>0) 
  {
    document.getElementById(X.elemento).innerHTML = X.segundos;
    X.segundos--;
  }
  else document.getElementById(X.elemento).innerHTML = "Cuenta finalizada";
}

for(var i=0;i<a.length;i++) {
		(function (i) {
    	setInterval(function(){mifun(a[i]);},1000);
    }(i));
}
<span id=demo4></span><br>
<span id=demo5></span><br>
<span id=demo6></span>

1
  • Muchas gracias!
    – Juaqui
    Commented el 3 jul. 2017 a las 10:51

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.