Comunidad de diseño web y desarrollo en internet online

Parámetro en lugar de valor fijo en función ( .on("scroll",f

Citar            
MensajeEscrito el 17 Sep 2015 03:14 am
Buenos días.

Estoy comenzando con JQuery y Javascript y mientras estaba haciendo un ejercicio de parallax me surgió una duda.

Elaboré un código que mediante el método .on() de Jquery y una función que hice, hace que cada que el usuario haga scroll en una página se escriba el valor de una variable en todos los párrafos. El valor de dicha variable es el resultado de una operación matemática entre el valor del scroll (que capturé en una variable con el método .scrollTop()) y un segundo valor.

La idea es que ese número va cambiando a medida que yo muevo el scroll, por que el valor de la variable depende del valor de dicho scroll.

El siguiente código hace que lo que les comento suceda de esa manera:

Código :

$(window).on("scroll", parallax);
function parallax(){
var scrollSize=$(window).scrollTop();
var scrollParallax=Number(scrollSize*0.5);
$("p").text(scrollParallax);
}


Mi duda está en lo siguiente, cuando traté de poner ese segundo valor que les menciono como un parámetro a pasar en la función, el valor que se muestra en los párrafos ya no es cambiante, es siempre el valor del primer cálculo cuando muevo el scroll, ya no se calcula el valor de "scrollParallax" cada que cambia el valor de "scrollSize", que es la variable en la que almaceno la posición del scroll que constantemente estoy modificando y que debería modificar mi variable "scrollParallax" y por tanto modificar constantemente el número que aparece en los párrafos de mi sitio web.

Por qué sucede esto??
Les dejo el código donde uso parámetro en la función detonada al hacer scroll, en lugar de usar un valor fijo.

$(window).on("scroll", parallax(0.5));
function parallax(medida){
var scrollSize=$(window).scrollTop();
var scrollParallax=Number(scrollSize*medida);
$("p").text(scrollParallax);
}

Muchas gracias por su respuesta.

Postdata:
Por favor no enfoquen dicha respuesta en cómo puedo hacer un parallax scrolling o algo así, lo que quiero saber en realidad es qué está pasando con el código, qué es lo que hace que con el segundo código mi variable no se recalcule o la función no se ejecute sino una vez o lo que sea que esté sucediendo ;)

De nuevo gracias.

Por diegorobh

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 17 Sep 2015 01:10 pm
Tienes una confusión.

El método on() es una función que acepta dos parámetros.
Me voy a centrar en el segundo de ellos porque es lo que importa a tu problema.
Cuando declaras esto:

Código Javascript :

$(window).on("scroll", parallax);

Estás diciendo que el método on() use como parámetro una cadena y una referencia a otra función JS. El segundo parámetro es el nombre de una función, o dicho de otra forma, es un puntero que apunta a un código ejecutable.

Cuando declaras esto:

Código Javascript :

$(window).on("scroll", parallax(0.5));

La cosa cambia radicalmente. El segundo parámetro ya no es una referencia a una función, lo que JS interpreta allí es que debe EJECUTAR esa función y el resultado de la misma pasarla como parámetro al método on().
Cuando al nombre de una función o método de clase le agregas los paréntesis al final, estás indicando que quieres que se ejecute; cuando no le pones esos paréntesis estás indicando que se apunte a esa función o método.

Considera el siguiente código:

Código Javascript :

var a = 1;
function Dummy() {
   return (a + 1);
}

var referencia =  Dummy;
console.log("Dummy: "+Dummy);
console.log("referencia: "+referencia());

Aquí la variable referencia apunta a la función Dummy. Cuando se hace el console.log con la llamada sin paréntesis, lo que se muestra es la función Dummy, pero cuando se llama con paréntesis lo que se muestra es el resultado de la ejecución de Dummy.

¿Se comprende?.

Cómo te ayuda esto a tu problema. Pues que no puedes hacer una referencia a una función con parámetros. Lo que tienes que hacer es pasar el valor en una variable global. Ese "0.5" en tu código ponlo en una variable global.

Por DriverOp

Claber

2510 de clabLevel



 

chrome
Citar            
MensajeEscrito el 18 Sep 2015 02:42 pm
Todo lo que te dijo DriverOP es totalmente correcto. ¿pero por que?

por ejemplo:

Código Javascript :

element.addEventListener('click', funcionMatona, false);


Funciona correctamente, ¿pero que tal si necesito pasar parametros?

Código Javascript :

element.addEventListener('click', funcionMatona(param1, param2), false);


Esta forma no va a funcionar, y es lo que tienes tu cuando tratas de hacer lo de Parallax..

Solucion 1:

Código Javascript :

element.addEventListener('click', function(){
    funcionMatona(param1, param2)
}, false);

Esta solucion puede funcionar, pero se puede perder el 'scope' (lo veras en un futuro) entonces además se pierde algo de rendimiento el andar metiendo tantas funciones dentro de funciones que solo sirven 1 vez.

Entonces tenemos el metodo .bind() nos permite hacer eso de la pasada de argumentos.

Código Javascript :

 element.addEventListener('click', funcionMatona.bind(scope, param1, param2), false);

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome

 

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