7

Hola he creado la siguiente clase:

   class Temporizador {
    constructor() {
        this.tiempo = 0;
    }
    getTime() {
        return this.tiempo;
    }

    init() {
        console.log(n);
        document.getElementById('countdown').innerHTML = this.tiempo;
        this.tiempo++;
        setInterval(console.log(this.init()), 1000);
    }
}

Y para instanciarla:

var temporizador = new Temporizador();
temporizador.init();

Lo he sacado de esta idea: https://codepen.io/evilnapsis/pen/wBZBgv

Problema que tengo, pues básicamente me da este error

Uncaught RangeError: Maximum call stack size exceeded

Y además ni me sale el contador, de repente me sale 11432

1
  • Estas entrando en un bucle infinito. Desde el init llamas a init, y este esta creando mas hilos donde llama a la misma función, así, llenando la memoria disponible
    – Jon
    Commented el 8 nov. 2019 a las 8:54

3 respuestas 3

6

Aquí hay varios problemas:

  1. Bucle infinito al estar llamando a init dentro del setInterval.
  2. Como dentro de setInterval estás llamando a init otra vez, por cada segundo estarás creando otro setInterval diferente.
  3. No estás en el mismo contexto para utilizar this.

Una de las formas correctas de hacerlo sería la siguiente:

class Temporizador {
    constructor() {
        this.tiempo = 0;
    }

    getTime() {
        return this.tiempo;
    }

    init() {
        setInterval(() => {
            this.tiempo++;
            document.getElementById('countdown').innerHTML = this.tiempo;
        },1000);
    }
}

var temporizador = new Temporizador();
temporizador.init();
<div id="countdown">0</div>

Fíjate que dentro de setInterval tenemos dos lineas de código que nos modifica el valor del contador y muestra el resultado.

3

El problema en tu código viene de tu función 'init()'.

En esta línea setInterval(console.log(this.init()), 1000); estás entrando en un bucle en el que cada segundo creas un nuevo intervalo y además intentas imprimir en la consola un el resultado de una función que no devuelve nada.

He creado este código donde arreglo tu función y además extiendo la clase para añadir una función con la que parar el temporizador.

class Temporizador {
    constructor() {
        this.tiempo = 0;
        this.interval;
    }
    getTime() {
        return this.tiempo;
    }

    init() {
        this.interval = setInterval(() => {
          this.tiempo++;
          document.getElementById('countdown').innerHTML = this.tiempo;
          console.log(this.tiempo)
        }, 1000);
    }
  
    stop() {
      clearInterval(this.interval)
    }
}

const timer = new Temporizador();
timer.init();
<span id="countdown">0</span>

En la clase temporizador estoy añadiendo la variable 'interval', en el 'init()' inicio el interval y dentro del mismo añado el código que quiero que se ejecute cada segundo que sería:

  1. Aumentar el valor de 'tiempo'.
  2. Actualizar el valor en el HTML.
  3. Imprimir el valor en la consola.

En la función 'stop()' simplemente elimino el 'interval'

Espero que te sirva

2
  • 1
    Esta solución creo que es óptima, o al menos es la que yo propondría Commented el 8 nov. 2019 a las 10:06
  • Muchas gracias :)
    – Vil_Llar
    Commented el 8 nov. 2019 a las 10:11
3

Tienes mal esta parte del código:

init() {
        console.log(n);
        document.getElementById('countdown').innerHTML = this.tiempo;
        this.tiempo++;
        setInterval(console.log(this.init()), 1000);
    }

La llamada a console.log(this.init()) es inmediata porque el resultado de su ejecución es lo que se entregará como parámetro a setInterval(), provocando un bucle infinito.

Además parece que lo que quieres es llamar a init() cada segundo, por lo que sería un setTimeout() o de lo contrario se crearía un intervalo nuevo en cada llamada, terminando por saturar el navegador de temporizadores.

init() {
        console.log(n);
        document.getElementById('countdown').innerHTML = this.tiempo;
        this.tiempo++;
        setTimeout(() => console.log(this.init()), 1000);
    }

Ahora estamos pasando como parámetro una función anónima que será ejecutada tras 1000 ms.

6
  • 2
    Hola, esta respuesta no es valida ya que this.init() no va a funcionar, después por cada segundo que pase estas volviendo a crear un intervalo.
    – MitaCloud
    Commented el 8 nov. 2019 a las 9:05
  • Si observas el código original esa es la idea del temporizador que desea crear.
    – franmost
    Commented el 8 nov. 2019 a las 9:15
  • La función anónima no tiene acceso a this por lo cual va lanzara el error this.init no es una función.
    – MitaCloud
    Commented el 8 nov. 2019 a las 9:24
  • Gracias @EugeniBejan. Ahora he entendido lo que querías decir y viendo tu respuesta he entendido lo de crear un nuevo intervalo. He modificado mi respuesta pero creo que la tuya es la que debería llevarse la marca de respuesta correcta. Tienes mi voto.
    – franmost
    Commented el 8 nov. 2019 a las 9:25
  • La solucion viable es esta: init() { setInterval(function(tiempo) { document.getElementById('countdown').innerHTML = x++; }, 1000); }
    – otacon070
    Commented el 8 nov. 2019 a las 9:33

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.