1

Me gustaría hacer una cuenta atrás simple y funciona pero parece que ejecuta 2 veces el código por cada vez que arranca el setInterval.

<p id="timeout"></p>
<script language="javascript" type="text/javascript">

var counter=10;
setInterval(function(){ counter=counter-1;document.getElementById('timeout').innerHTML=counter; }, 1000);

</script>
2
  • El contador va de uno en uno y funciona sin problemas. ¿Estás seguro de que no llamas al setInterval dos veces?
    – Alvaro Montoro
    Commented el 12 oct. 2016 a las 13:06
  • gracias a todos, me han servido todas las soluciones pero me ha llamado en especial la atención de dev joel Commented el 12 oct. 2016 a las 14:25

2 respuestas 2

1

Se ejecutará sin parar ya que no tiene alguna condición dentro de la función. Para validar esto y detenerlo. Por ejemplo cuando llegue a 0 el contador podríamos obtener el ID que retorna la función, como dice la documentación setInterval

Teniendo este id podemos llamar a clearInterval para parar la ejecución

var counter=10;
var id = setInterval(function(){ 
   if(counter==0)
      clearInterval(id);
   else
   {
      counter=counter-1; 
      document.getElementById('timeout').innerHTML=counter; 
   }
}, 1000);
<p id="timeout"></p>

Si desea personalizar podría envolverlo en una función y pasar los parametros que requiera como valor inicial de counter etc.

function interval(id,i){
    var counter=id;
    var id = setInterval(function(){ 
    if(counter==0)
    {
        clearInterval(id);
        interval(20,4);
    }
    else
    {
        counter=counter-i; 
        document.getElementById('timeout').innerHTML=counter; 
    }
    }, 1000);
}

interval(10,1);
<p id="timeout"></p>

0

es porque el setInterval,, Funciona como un stop de codigo,, pasa un tiempo y se ejecuta el resto de codigo siguiente,, la mejor opcione es hacer un ciclo , con el For, Do-while, o while para realizar iteraciones

Mejor toma este codigo como ejemplo del funcionamiento de setInterval

<!DOCTYPE html>
<html>
<body>

<p>Click "Try it". Wait 3 seconds, and the page will alert "Hello".</p>

<button onclick="setTimeout(myFunction, 3000);">Try it</button>

<script>
function myFunction() {
    alert('Hello');
setTimeout(myFunction2, 3000);
}

function myFunction2() {
    alert('Hello2'); 
}

</script>

</body>
</html>

Ejemplo del de un ciclo de iteracion

<body>

<h1>JavaScript while</h1>

<p id="demo"></p>

<script>
var text = "";
var i = 10;
while (i> 0) {
    text += "<br>The number is " + i;
    i=i-2;
}
document.getElementById("demo").innerHTML = text;
</script>

</body>

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.