0

Estoy creando varios objetos que deberían tener contadores (de tiempo) independientes entre sí). Eso, necesito saber cómo crear objetos absolutamente independientes entre sí. Al parecer estoy reutilizando (sin intención) una función y esto no debe ser así. Cada objeto al ser instanciado debe tener su propio "timer" funcionando independientemente de los otros objetos que se vayan creando.

function Timer (horas=0,minutos=0, segundos=0){
this.horas = horas;
this.minutos = minutos;
this.segundos = segundos;
this.id ="#";
this.iniciar = function(){
    self = this;
    self.segundos = this.segundos;
    self.intervalo = setInterval(function(){
        self.segundos++;
        if(self.segundos==60){
            self.segundos = 0;
            self.minutos++;
        }
        if(self.minutos==60){
            self.segundos = 0;
            self.minutos = 0;
            self.horas++;
        }
        self.contar(self.horas, self.minutos, self.segundos);
    }, 1000);
};
this.detener= function(){
    clearInterval(this.intervalo);
};
this.contar = function(hors, mins, segs){ // Esta función permite ir viendo el contador.
    num = format(segs);
    $("#"+ this.id +"_segundos").html(num);
    num = format(mins);
    $("#"+ this.id +"_minutos").html(num);
    num = format(hors);
    $("#"+ this.id +"_horas").html(num);
};
format= function(num){ // esta función me formatea los números (formato ##)
    var num = num;
    return ("0" + num).slice(-2);
}

};

Cuando creo un objeto hago lo siguiente:

arr_objetos["objeto_"+obj.id] = new Timer();
arr_objetos["objeto_"+obj.id].id = obj.id; // Asignamos ID al objeto
arr_objetos["objeto_"+ obj.id].iniciar(); // Iniciamos el objeto el contador.

Nota: obj.id corresponde al primer elemento de un array de objetos provenientes de Nodejs usando websockets.

Como pueden apreciar estoy creando diferentes objetos, por eso utilizo un array de nombre arr_objetos y creo las claves dinámicamente para añadirle el objeto contador. Si ustedes utilizan este codigo van a notar que los segundos se duplican o triplican en el ultimo objeto creado, y esto es porque por alguna razón ambos objetos utilizan la misma función "iniciar" y no se crean ámbitos (scopes) diferentes por cada objeto.

Estoy confundido con este tema, espero sus comentarios.

2
  • NO soy un experto en manejo de clases con javascript, pero podria recomendarte tratar de usar las clases con la palabra reservada class... no creo que varie mucho, pero estaria bien que intentaras hacerlo Commented el 29 oct. 2016 a las 17:57
  • German, estoy usando Javascript ECMAScript 5, aquí no se usa la palabra class.
    – Luis
    Commented el 31 oct. 2016 a las 13:58

2 respuestas 2

0

Los prototipos se utilizan por lo general para cuando uno va a crear funciones que realmente no modifican los datos de la clase y se incluyen en el prototipo para que al crearse un nuevo objeto, no se incluya dentro, sino que se reutilice el codigo anteriormente definido en TODOS los objetos. Te recomiendo que elimines la variable self que estas creando porque estas declarandola global, asi que cuando hagas un nuevo objeto, ella va a cambiar de valor constantemente. Utiliza el this directamente. Otra cosa que tienes que tener muuuy presente son los contextos. Cuando vas a anidar una funcion dentro de otra, el elemento this cambia, asi que si quieres que aunque definas una funcion dentro de otra, el contexto es el mismo, debes utilizar la funcion bind(). Ahi te va un ejemplo rustico, pero que funciona con varios timers a la vez sin problema alguno.

<meta charset="utf-8">

<script>

    var timerCollection = [];
    var cant = 0;
    var tmp = "<div><span id='{{h}}'>0</span> <span id='{{m}}'>0</span> <span id='{{s}}'>0</span><button onclick='start({{c}})'> Iniciar </button><button onclick='stop({{c}})'> Detener </button></div>"

    function Timer(horas=0,minutos=0, segundos=0, id){
        this.horas = horas;
        this.minutos = minutos;
        this.segundos = segundos;
        this.intervalo = null;
        this.id = id;

        this.iniciar = function(){

            if(this.intervalo == null) {

                this.intervalo = setInterval(function() {
                    this.segundos++;

                    if(this.segundos==60){
                        this.segundos = 0;
                        this.minutos++;
                    }

                    if(this.minutos==60){
                        this.segundos = 0;
                        this.minutos = 0;
                        this.horas++;
                    }

                    this.contar(this.horas, this.minutos, this.segundos);
                }.bind(this), 1000);
            }
        };

        this.detener= function(){
            clearInterval(this.intervalo);
            this.intervalo = null;
        };

        this.contar = function(hors, mins, segs){ // Esta función permite ir viendo el contador.
            num = this.format(segs);
            document.querySelector("#s_"+ this.id).innerHTML = num;
            num = this.format(mins);
            document.querySelector("#m_"+ this.id).innerHTML = num;
            num = this.format(hors);
            document.querySelector("#h_"+ this.id).innerHTML = num;
        }.bind(this);

        this.format= function(num){ // esta función me formatea los números (formato ##)
            var num = num;
            return ("0" + num).slice(-2);
        }
    }

    function makeTimer() {

        var cnt = document.querySelector('#timerContainer');

        timerCollection.push(new Timer(0, 0, 0));

        timerCollection[cant].id = cant;

        var x = tmp;

        while(x.indexOf("{{h}}") != -1)
            x = x.replace("{{h}}", "h_" + cant);

        while(x.indexOf("{{m}}") != -1)
            x = x.replace("{{m}}", "m_" + cant);

        while(x.indexOf("{{s}}") != -1)
            x = x.replace("{{s}}", "s_" + cant);

        while(x.indexOf("{{c}}") != -1)
            x = x.replace("{{c}}", cant);

        cnt.innerHTML += x;

        cant++;

    }

    function start(idx) {
        timerCollection[idx].iniciar();
    }

    function stop(idx) {
        timerCollection[idx].detener();
    }

</script>

<body>

    <div id="timerContainer">

    </div>

    <button onclick="makeTimer()"> Crear Timer </button>

</body>
1
  • Te agradezco mucho, es la solución que necesitaba. Tu ejemplo me ha resultado muy util. Aún no entiendo bien en qué momento usar bind pero funcionó.
    – Luis
    Commented el 31 oct. 2016 a las 13:56
-1

Es raro pero puede tener que ver con el motor de Javascript o algo así, no tengo tiempo de probar tu código pero puedes intentar hacer esto:

cambiar

this.iniciar = function(){

por : this.prototype.iniciar = function(){

me avisas si funciona.

1
  • No funciona. Me envía el mensaje: "iniciar no está definido".
    – Luis
    Commented el 29 oct. 2016 a las 15:45

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.