Uso de una función por más de un objeto simultáneamente.

tunait · #1 (**permalink**) 28/05/2005, 14:19

Buenas,

pues eso. Necesito ayuda teórica.

Imaginemos una función que cuando es llamada por algún elemento de la página wé se pasa el rato haciendo algo con ese elemento llamándose a sí misma recursivamente.

Entonces si quiero usar esa misma función para otro elemento, deja de furular con el primero para ser usada por el segundo, pero yo quiero que ambos (o los que me de la gana) elementos usen la función simultáneamente.

¿Cómo narices lo encaro?

... no me vale escribir tantas funciones como elementos la quieran usar.

Sería cuestión de algo así como que cada elemento creara una instancia de la función y la usara independientemente pero no me da la neurona para encontrarle la vuelta.

También he intentado con funciones anónimas pero no sé entonces cómo usar la recursividad ....

Saludos

caricatos · #2 (**permalink**) 28/05/2005, 16:57

Hola tunait

(¡Que raro verte haciendo preguntas!)

No sé si te servirá el truco que yo suelo hacer para estas cosas recursivas, pero te lo comento y me dices si te vale ¡vale!...

Supongo que esas llamadas recursivas las haces con:
setTimeout("funciónRecursiva()", retraso);

Pues yo suelo pasarle los parámetros necesarios en la recursividad como el id del elemento (si es un tag) y alguna variable con el estado (en casos de porcentajes por ejemplo)

setTimeout("funciónRecursiva('" + var1 + "', '" * + var2 + "')", retraso);

Un ejemplo práctico lo puedes ver en los botones de esta página: http://www.pepemolina.com/editor/index.html

El script lo tenía medio hecho, y lo terminé en este mensaje: http://www.forosdelweb.com/f13/fadeout-talbla-159137/

Si esas llamadas recursivas no llevan retrasos también le puedes pasar parámetros, aunque en el caso anterior es conveniente que los parámetros sean cadenas o números (evitar cualquier tipo de objetos)

Saludos

tunait · #3 (**permalink**) 29/05/2005, 07:51

Yuju Caricatos

pues yá ves, yo también tengo mis lagunas...

He estado revisando lo que me has dejado. Me lo he estado estudiando .... he de mirármelo un poco más, muchas gracias

Yá te contaré!

Un saludo

kepawe · #4 (**permalink**) 04/06/2005, 12:07

Hola tunait y caricatos.

Otra opción podría ser utilizar la propiedad prototype de Function.
Para que te hagas una idea te envío un ejemplo.

Código:

<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--


function count_down(){
// Evitamos que el usuario acelere la cuenta atrás
this.onclick = "new Function(return false)";
this.n--;
this.innerHTML = this.n;
// Si a terminado la cuenta atrás volvemos a permitir la cuenta atrás
if(this.n == 0){ 
	this.innerHTML = this.n + " Haz click para iniciar la cuenta atrás otra vez.";
	this.onclick = function(){
            this.n = this.const_n + 1;
            this.count_down();
		
	}
}
if(this.n > 0) this.ctrl = window.setTimeout(""+this.id+".count_down()",2000);


}
// Enviamos el objeto y las variables 
Function.prototype.args = function(obj,n){
// añadimos propiedades al objeto para almacenar las variables
obj.const_n = n;
obj.n = n + 1;
obj.ctrl;
// Asignamos la función al objeto
obj.count_down = this;
// Almacenamos el objeto en una variable, es necesario para el método setTimeout
eval("window."+obj.id+" = obj");
// Llamamos a la función
obj.count_down();

}

//-->
</script>

</head>
<body>
<div id="test" onclick="count_down.args(this,10)">10 Haz click para iniciar la cuenta atrás</div><br>
<div id="test2" >20 Haz click para iniciar la cuenta atrás</div><br>
<script language="JavaScript" type="text/javascript">
<!--
document.getElementById("test2").onclick = function(){
	count_down.args(this,20);
}
//-->
</script>


</body>
</html>

En este caso utilizo setTimeout, pero como habrás observado se puede prescindir de este método si no es necesario el retraso.

Saludos

kepawe · #5 (**permalink**) 04/06/2005, 19:47

Hola de nuevo.

No me he dado cuen

, hay una manera más practica

, no es necesario utilizar prototype de Function, básicamente es lo mismo de antes.

Código:

<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

// Enviamos el objeto y las variables 
 function start_countdown(obj,n){
  
  // añadimos propiedades al objeto para almacenar las variables
  obj.const_n = n;
  obj.n = n + 1;
  obj.ctrl;
  // Asignamos la función al objeto
  obj.count_down = function(){
      // Evitamos que el usuario acelere la cuenta atrás
      this.onclick = "new Function(return false)";
      this.n--;
      this.innerHTML = this.n;
      // Si a terminado la cuenta atrás volvemos a permitir la cuenta atrás
      if(this.n == 0){ 
      	this.innerHTML = this.n + " Haz click para iniciar la cuenta atrás otra vez.";
      	this.onclick = function(){
                  this.n = this.const_n + 1;
                  this.count_down();
      		
      	}
      }
      if(this.n > 0) this.ctrl = window.setTimeout(""+this.id+".count_down()",2000);
    
    
  	}
  // Almacenamos el objeto en una variable, es necesario para el método setTimeout
  eval("window."+obj.id+" = obj");
  // Llamamos a la función
  obj.count_down();

}

//-->
</script>

</head>
<body>
<div id="test" onclick="start_countdown(this,10)">10 Haz click para iniciar la cuenta atrás</div><br>
<div id="test2" >20 Haz click para iniciar la cuenta atrás</div><br>
<script language="JavaScript" type="text/javascript">
<!--
document.getElementById("test2").onclick = function(){
	start_countdown(this,20);
	
}

//-->
</script>


</body>

</html>

Para que sea el código más "legible" se podría poner la function count_down fuera de la función start_countdown.

Código:

<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function count_down(){
      // Evitamos que el usuario acelere la cuenta atrás
      this.onclick = "new Function(return false)";
      this.n--;
      this.innerHTML = this.n;
      // Si a terminado la cuenta atrás volvemos a permitir la cuenta atrás
      if(this.n == 0){ 
      	this.innerHTML = this.n + " Haz click para iniciar la cuenta atrás otra vez.";
      	this.onclick = function(){
                  this.n = this.const_n + 1;
                  this.count_down();
      		
      	}
      }
      if(this.n > 0) this.ctrl = window.setTimeout(""+this.id+".count_down()",2000);
    
    
  	}

// Enviamos el objeto y las variables 
 function start_countdown(obj,n){
  
  // añadimos propiedades al objeto para almacenar las variables
  obj.const_n = n;
  obj.n = n + 1;
  obj.ctrl;
  // Asignamos la función al objeto
  obj.count_down = count_down
  // Almacenamos el objeto en una variable, es necesario para el método setTimeout
  eval("window."+obj.id+" = obj");
  // Llamamos a la función
  obj.count_down();

}

//-->
</script>

</head>
<body>
<div id="test" onclick="start_countdown(this,10)">10 Haz click para iniciar la cuenta atrás</div><br>
<div id="test2" >20 Haz click para iniciar la cuenta atrás</div><br>
<script language="JavaScript" type="text/javascript">
<!--
document.getElementById("test2").onclick = function(){
	start_countdown(this,20);
	
}

//-->
</script>


</body>

</html>

Lo de "legible" es cuestión de gustos.

Bueno, espero haber acertado.

Saludos