1

estoy desarrolllando un incremento de numero con setInterval(), y quiero qu el setInterval se detenga cunado el contador llegue a determinado numero.

var cont = 0;
var rango = document.getElementById('rango');

    var id = setInterval(function(){
        rango.innerHTML = cont;
        cont++;
    }, 1000);   

    if(cont == 10) 
    {
        clearInterval(id);
    }

El problema es que para realizar la condicional la variable cont debe estar en el mismo ambito, pero no lo esta ya que esta dentro de la function setInterval. Lo que hago es sacarla y ponerla afuera.

var id = setInterval(function(){
            rango.innerHTML = cont;
         }, 1000);  
         cont++;

         if(cont == 10) {
            clearInterval(id);
         }

pero al hacer esto, al estar fuera del setInterval no se incrementa. Quien sabe como ubicar bien el codigo? quien me explica? quien podra ayudarme? gracias de ante mano

2
  • ¿Qué es rango.innerHTML y para que sirve asignarlo a cont si después lo autoincrementarás en uno? También la condición debe estar adentro del intervalo para que con cada iteración se haga la comparación y se detenga el intervalo una vez se alcance dicha condición
    – Yikarus
    el 6 oct. 2017 a las 22:27
  • Estoy haciendo un conteo de numero hasta 20, rango es un simple <span id="rango" </span> y estoy coloacndo con innerHTML la variable cont incrementada cada 1s, y es efectivo, pero ahora no puedo lograr que se detenga cuando cont llegue a 20 el 6 oct. 2017 a las 22:28

2 respuestas 2

9

Lo primero es que tu primer código está correcto. contse debe inicializar fuera del intervalo y debe ir aumentando dentro de este. Ahora lo que no te funciona es la condición, esta debe quedar adentro del intervalo, de lo contrario solo se hará una vez y el intervalo seguirá hasta el fin de los tiempos. Te dejo el snippet con las correcciones necesarias para que funcione acorde a lo que ocupas.

var cont = 0;
var rango = document.getElementById('cont');

    var id = setInterval(function(){
        rango.innerHTML = cont;
        cont++;
        if(cont == 10) 
        {
            clearInterval(id);
        }
    }, 1000); 
<span id='cont'></span>

1
  • Y por qué en vez de usar setInterval usas setTimeout() y que dentro de la funcion solo se vuelva a ejecutar setTimeout si no has llegado al valor?
    – nekoritoX
    el 6 feb. 2022 a las 10:03
0

quizás puedas sustituir el setInterval por una función, aquí te dejo el código:

//Variable global
var cont = 0,
       rango = document.getElementById('rango');

//Definimos una función recursiva
function interval(){
    rango.innerHTML = cont;
    cont++;
    if(cont != 10){
        interval();
    }
}

Ya solo queda llamar a la función: interval();

1
  • 1
    La funcion interval no funciona en este caso, por que lo que busco es que rango se aumente cada 1s, no de un solo taponaso. el 6 oct. 2017 a las 23:08

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.