2

Estoy tratando de hacer un countdown entre una clase en type script, es mi primer código, pero por alguna razón no funciona, la variable distance no toma valor alguno a pesar de que se le especifica el valor que dede tener

lo que obtengo es:

Faltan: NaN Dias, NaN Horas, NaN Minutos, NaN Segundos Faltan: NaN Dias, NaN Horas, NaN Minutos, NaN Segundos Faltan: NaN Dias, NaN Horas, NaN Minutos, NaN Segundos Faltan: NaN Dias, NaN Horas, NaN Minutos, NaN Segundos Faltan: NaN Dias, NaN Horas, NaN Minutos, NaN Segundos Faltan: NaN Dias, NaN Horas, NaN Minutos, NaN Segundos Faltan: NaN Dias, NaN Horas, NaN Minutos, NaN Segundos Faltan: NaN Dias, NaN Horas, NaN Minutos, NaN Segundos

Gracias por su ayuda

 class MyCountDown{
    countDownDate: number;
    now: number;
    days: number;
    hours: number;
    minutes: number;
    seconds: number;
    distance: number;

    constructor(countDownDate_:number){

        this.countDownDate = countDownDate_;
        this.now = new Date().getTime();

    } 

    mi_funcion () {

        let x = setInterval(function():void{

            let distance: number = this.countDownDate - this.now;
            let days:number = Math.floor(distance / (1000 * 60 * 60 * 24));
            let hours:number = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            let minutes:number = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            let seconds:number = Math.floor((distance % (1000 * 60)) / 1000);


            console.log( `Faltan:  ${days} Dias, ${hours} Horas,  ${minutes} Minutos, ${seconds} Segundos ` );

            if (distance < 0){
                clearInterval(x);

                console.log("El tiempo para preventa he terminado");
            }
        },1000);

    }    
}


let countDownDate:number = new Date ("Jan 5, 2021 15:37:25").getTime();
let instancia = new MyCountDown(countDownDate);
instancia.mi_funcion() 

1 respuesta 1

0

this.countDownDate y this.now son undefined porque this no es el contexto de la clase.

Parece ser que el callback del setInterval y de cualquier función adentro de un método en typescript, aunque sea una función flecha, no toma el contexto de la clase con this, por lo que no se puede acceder a las propiedades u otros métodos, eso se soluciona haciendo:

let _self = this;

y dentro de la función (setInterval en este caso):

let distance: number = _self.countDownDate - _self.now;

El ejémplo completo aquí https://jsfiddle.net/t3yedc05/

Y Aquí una explicación mas completa https://basarat.gitbooks.io/typescript/docs/arrow-functions.html

Vale aclarar que en javaScript puro solo sería suficiente con que la función se declare en forma de flecha, pero este comportamiento es distínto en typescript.

2
  • Hola el problema es que la cuenta nos e actualiza cada segundo como dice el interval: Faltan: 493 Dias, 21 Horas, 32 Minutos, 8 Segundos Faltan: 493 Dias, 21 Horas, 32 Minutos, 8 Segundos Faltan: 493 Dias, 21 Horas, 32 Minutos, 8 Segundos Faltan: 493 Dias, 21 Horas, 32 Minutos, 8 Segundos Faltan: 493 Dias, 21 Horas, 32 Minutos, 8 Segundos el 30 ago. 2019 a las 23:06
  • Claro, eso es por otra cosa, porque el constructor define el tiempo que se va a usar. Osea que una vez que haces el new, ya funciona siempre con ese tiempo. Si quieres que cambie el tiempo, tienes que ponerlo adentro del interval
    – Emeeus
    el 30 ago. 2019 a las 23:19

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.