Comunidad de diseño web y desarrollo en internet online

setTimeout o setInterval dentro de clase.

Citar            
MensajeEscrito el 16 Ago 2007 04:02 pm
Que tal.. hace tiempo que no me paseaba por estos lugares.
mi pregunta es la siguiente:

Se puede hacer una llamada ya sea a un setInterval o a un setTimeout dentro de una clase sin necesidad de especificar el nombre de instancia que se la ha dado al objeto de dicha clase?

por ejemplo digamos que tengo esto:

Código :

function perrito(){
     this.ladra = function(){
          alert("wolf, wolf");
          setTimeout("this.ladra()", 1000);
     }
}

var perro = new perrito();
perro.ladra()


como ven primero defino la clase perrito y despues hago una instancia de esta clase pero el problema es que al hacer la llamada al setTimeout, este no responde y me dice que this.ladra no es una funcion. Para solucionar este problema basta con pasar el nombre del objeto a la funcion setTimeout con lo que quedaria asi:

Código :

....
setTimeout("perro.ladra()",1000);
...


pero oviamente eso no serviria por que solo se podria usar el nombre de instancia perro, eso se soluciona facil. Es cuestion de pasar por parametro el nombre de la instancia del objeto de la clase perrito y guardarlo en una varible para despues reemplazarlo.

Código :

function perrito(objeto){
     //objeto es el nombre con que se hace referencia a la clase, en este caso perro
     this.objeto2 = objeto;
     this.ladra = function(){
          alert("wolf, wolf");
          setTimeout(this.objeto2+".ladra()", 1000);
     }
}

var perro = new perrito("perro");
perro.ladra()

ahora cuando la funcion es interpretada la varible objeto2 en el setTimeout camiba, en este caso por perro, quedando nuevamente setTimeout("perro.ladra()", 100)

Como ven, para que funcione el metodo tengo que pasar por parametro el nombre de instancia, en este caso perro, lo cual no se ve para nada bien.
Hay alguna forma de hacer esto sin pasar el nombre de instancia?

Por buzu

163 de clabLevel



 

Los Angeles, California

firefox
Citar            
MensajeEscrito el 16 Ago 2007 04:50 pm
Hey, estuve revisando el código y encontré 2 problemas:
1. El this no está haciando referencia a la clase.
2. Estas poniendo comillas y parentesis donde no debes.

Código :

function perrito(){
     var self = this;
     this.ladra = function(){
          alert("wolf, wolf");
          setTimeout(self.ladra, 1000);
     };
}

var perro = new perrito();
perro.ladra();


En caso quieras ponerle parámetros a ladra, tendrias que usar una función anónima en setTimeout. Solo un ejemplo.

Código :

setTimeout(function(){
   self.ladra('param1', 'param2');
}, 1000);

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 16 Ago 2007 06:23 pm
ya, imaginaba que el this no hacia referencia a la clase... es por eso que es necesario pasar perro como parametro, entonces ahora si hace referencia. por otro lado no he provado con self, no se me havia ocurrido... si eso funciona me boy a ahorrar algunas lineas de codigo y parametros, por otrolado tendre que modificar algunos de mis objetos...

te pongo un ejemplo real para que veas como estoy haciendo esto.

Esta clase lo que hace es un degradado de color al elemento al que se le aplica...

Código :

function degradadoColor(numeroR,  numeroG, numeroB, numeroRFinal, numeroGFinal, numeroBFinal, id, objeto){
         this.letras = new Array();
            this.letras[0]="0";
            this.letras[1]="1";
            this.letras[2]="2";
            this.letras[3]="3";
            this.letras[4]="4";
            this.letras[5]="5";
            this.letras[6]="6";
            this.letras[7]="7";
            this.letras[8]="8";
            this.letras[9]="9";
            this.letras[10]="a";
            this.letras[11]="b";
            this.letras[12]="c";
            this.letras[13]="d";
            this.letras[14]="e";
            this.letras[15]="f";
         this.convertirExadecimal = function(numeroDecimal){
            var digito2 = Math.floor(numeroDecimal/16)
             var digito1 = numeroDecimal - (digito2 * 16)
             hexadecimal= this.letras[digito2] + this.letras[digito1];
             return hexadecimal
         }
         numeroB2 = numeroB;
         numeroBFinal2 = numeroBFinal;
         numeroG2 = numeroG;
         numeroGFinal2 = numeroGFinal;
         numeroR2 = numeroR;
         numeroRFinal2 = numeroRFinal;
         id2 = id;
         objeto2 = objeto
         this.incrementaRGB = function(numeroR,  numeroG, numeroB, numeroRFinal, numeroGFinal, numeroBFinal, id, objeto){
            //guardo las variables para no perderlas al hacer la segunda llamada de la funcion
            numeroB2 = numeroB;
            numeroBFinal2 = numeroBFinal;
            numeroG2 = numeroG;
            numeroGFinal2 = numeroGFinal;
            numeroR2 = numeroR;
            numeroRFinal2 = numeroRFinal;
            id2 = id;
            objeto2 = objeto
            //comienzo a degradar B
            if(numeroR2 < numeroRFinal2){
               numeroR2++;
            }else if(numeroR2 > numeroRFinal2){
               numeroR2--;
            }else if(numeroR2 == numeroRFinal2){
               numeroR2 = numeroRFinal2;
            }
            //llamo a la funcion para dconvertir hexadecimal y lo guardo en una varible.
            hexadecimalB = this.convertirExadecimal(numeroB2);
            //comienzo a degradar G
            if(numeroG2 < numeroGFinal2){
               numeroG2++;
            }else if(numeroG2 > numeroGFinal2){
               numeroG2--;
            }else if(numeroG2 == numeroGFinal2){
               numeroG2 = numeroGFinal2;
            }//llamo a la funcion para dconvertir hexadecimal y lo guardo en una varible.
            hexadecimalG = this.convertirExadecimal(numeroG2);
            //comienzo a degradar R
            if(numeroB2 < numeroBFinal2){
               numeroB2++;
            }else if(numeroB2 > numeroBFinal2){
               numeroB2--;
            }else if(numeroB2 == numeroBFinal2){
               numeroB2 = numeroBFinal2;
            }
            //llamo a la funcion para dconvertir hexadecimal y lo guardo en una varible.
            hexadecimalR = this.convertirExadecimal(numeroR2);
            if(numeroR2 == numeroRFinal2 && numeroG2 == numeroGFinal2 && numeroB2 == numeroBFinal2){
               clearInterval(intervaloRGB);
            }
            document.getElementById(id2).style.backgroundColor= "#" + hexadecimalR + hexadecimalG + hexadecimalB;
         }
         this.degradar=function(){
               intervaloRGB = setInterval(objeto2 + ".incrementaRGB(numeroR2,  numeroG2, numeroB2, numeroRFinal2, numeroGFinal2, numeroBFinal2, id2, objeto2)",1);
               
            }
      }


y aqui la llamada en el html

Código :

<div id="degradame" style="width:200px; height:200px; color:#ff0000; background-color: #000;" onclick="d.degradar();">
      <script type="text/javascript">
         var d = new degradadoColor(0,0,0,255,255,255,"degradame","d");
      </script>
      algo de mi texto...
   </div>


Provare con self y ya publicare los resultados obtenidos.

PD. la funcion anterior es parte de obj.js la libreria que estoy armando...

Por buzu

163 de clabLevel



 

Los Angeles, California

firefox
Citar            
MensajeEscrito el 17 Ago 2007 01:28 am
Se ve bien, uno de los principales problemas en OOP es que uno se olvide del scope y siga usando this en todos lados, a veces uno puede perder la noción de a que está vinculando.

Suerte con tu libreria, saludos.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 17 Ago 2007 03:53 pm
Si, tienes toda la razón... Pero ahora seré mas cuidadoso. De cualquier modo esta es la primera verción y cuando esté lista saldrá como beta. Ya la iré ampliando, mejorando y arreglando algunos gusanos (bugs) con el paso del tiempo.

Gracias.

Por buzu

163 de clabLevel



 

Los Angeles, California

firefox
Citar            
MensajeEscrito el 08 Oct 2012 01:59 am
Hola amigo, quizás a estás alturas está de mas que te sugiera esto, en todo caso puede servirle a otras personas:

Código :

var perrito = function(){
    // Instanciamos el objeto en una variable para acceso global
     var me = this; 
     
     me.ladra = function(){
          alert("wolf, wolf");
          setTimeout({ 
              me.ladra();
              // Algún otro procedimiento
          }, 1000);
     };
};

var perro = new perrito();
perro.ladra();


La ventaja de usar el interval de esa manera es que puedes ejecutar varias instrucciones, o alguna función especial usada con frameworks como jQuery o MooTools.

Saludos.

Por kivpson

1 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 08 Oct 2012 02:40 am
Hola amigo, quizás a estás alturas está de mas que te sugiera esto, en todo caso puede servirle a otras personas:

Código :

var perrito = function(){
    // Instanciamos el objeto en una variable para acceso global
     var me = this; 
     
     me.ladra = function(){
          alert("wolf, wolf");
          setTimeout(function(){ 
              me.ladra();
              // Algún otro procedimiento
          }, 1000);
     };
};

var perro = new perrito();
perro.ladra();


La ventaja de usar el interval de esa manera es que puedes ejecutar varias instrucciones, o alguna función especial usada con frameworks como jQuery o MooTools.

Saludos.

Por kivpson

1 de clabLevel



Genero:Masculino  

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.