Ejecutar funciones fuera del objeto

blackweaver · #1 (**permalink**) 21/05/2011, 11:08

Estimados

Quiero llamar a una función del objeto, pero que esta se ejecute si es creada fuera de el. Por ejemplo, supongan que tengo un objeto fadeElement, que cuando el fade termina, ejecuta una método finish() del objeto. Pero este método se ejecutará si es creado fuera del mismo.

Esto me permitiría utilizarlo ucando quiero para que escuche cuando el fade termina.

EJ:

Código:

function fadeElement(e){
       this.element = document.getElementById(e);
       this.finish = finish;
         //Supongan que acá termino el fade y ejecuto la función finish
        this.finish();
         
}

var hidebox = new fadeElement("box");
hidebox.finish = function(){
       alert("ya se oculto");
}

Esto que planteo no funciona, Hay alguna forma de hacerlo funcionar o alguna manera de hacer en javascript lo que quiero?... esto mismo en flash SI se puede hacer.

Desde ya muchas gracias!!!

InKarC · #2 (**permalink**) 21/05/2011, 11:56

Hay que añadirlo usando prototype, aqui un ejemplo sencillo:

Código Javascript:

Ver originalfunction fadeElement(e)
{
    this.mensaje = e;
}
 
var m1 = new fadeElement("Funciona");
 
fadeElement.prototype.mostrar = function()
{
alert(this.mensaje) 
}
 
m1.mostrar()

Flash automáticamente crea variables publicas a la instancia de un objeto cuando la variable publica no existe con anterioridad. Aunque eso en flash eso solo afecta a la instancia mas no a todos los objetos de esa clase; aquí afecta a todos los objetos.

Panino5001 · #3 (**permalink**) 21/05/2011, 12:13

Podrías generar un método vacío para luego sobreescribirlo y que funcione como pseudoevento, algo semejante a broadcasting. Un ejemplo muy rápido:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&#237;tulo</title>
<script type="text/javascript">
function fadeElement(e){
       this.element = document.getElementById(e);
       this.element.style.visibility='visible';
       this.finish = function(){};//método vacío
       this.timmer=0;
       this.ejecutar=function(inicio,fin){
           if(inicio<fin){
               clearTimeout(this.timmer);
                this.element.style.visibility='hidden';
                   return this.finish();//llamamos al método vacío
           }
           this.element.style.opacity=inicio;
           this.element.style.filter='alpha(opacity='+inicio*100+')';
           var _self=this;
           this.timmer=setTimeout(function(){_self.ejecutar(inicio-0.05,0)},50);
       }
       
         
}
onload=function(){
    var hidebox = new fadeElement("box");
    hidebox.finish = function(){
       alert("ya se oculto");
    }
    hidebox.ejecutar(1,0);
}
</script>

</head>

<body>
<div id="box" style="background-color:#F00">Colocar aquí el contenido para  id "box"</div>
</body>
</html>

Normalmente en animaciones se suele agregar para poder usar pseudoeventos como onMotionStart, onMotionProgress, onMotionFinished, etc.

blackweaver · #4 (**permalink**) 21/05/2011, 12:26

Gracia a ambos!

InKarC, en mi búsqueda por la solución había probado lo que tu me recomiendas, el problema que había encontrado, era que no puedo ejectuar la función desde dentro de la clase; justamente lo que acaba de solucionar Panino. Brillante! como la función retorna la función!

Un problema menos en mi vida jejeje Muchas gracias!