jquery/javascript - accediendo a variables desde fuera de una función

Question

Estoy tratando de usar un valor de variable fuera de la función en la que fue definido. Pensé que solo necesitaba declarar la variable fuera de la función, pero eso no la corta . ¿Debe ser fácil para aquellos que saben?

Fiddle Here

jQuery(document).ready(function() { 

    var readOut; 
    var readOut2; 

    $(document).mousemove(function(e) { 
     readOut1 = e.pageX; 
     readOut2 = e.pageY; 
     $('#var1').html(readOut1); 

    }); 

    $('#var2').html(readOut2); 
})​ 

Gracias a todos, especialmente Andy E con la explicación y solution.

Answer 1

Está asignando las variables a través de una función de devolución de llamada que está registrada en un controlador de eventos. Esto significa que cuando esta se ejecuta:

$('#var2').html(readOut2); 

readOut2 tiene un valor de indefinido debido a que no se ha establecido por la función de controlador mousemove todavía. Ese controlador no se activará hasta que el código en cola actual deje de ejecutarse y el usuario mueva el mouse. Puede definir una función en el mismo ámbito que las variables y llamar a esa función desde el manejador de mouse mousemove.

Re: sus comentarios en otra respuesta, se podría utilizar un temporizador:

jQuery(document).ready(function() {  
    var readOut1; 
    var readOut2; 

    $(document).mousemove(function(e) { 
     readOut1 = e.pageX; 
     readOut2 = e.pageY; 
     $('#var1').html(readOut1); 

    }); 

    window.setInterval(function() { 
     $('#var2').html(readOut2); 
    }, 300); 
})​; 

Answer 2

supongo que se desea realizar un seguimiento coordenadas del cursor, revisar el código fuente actualización:

jQuery(document).ready(function() { 

    var readOut1; 
    var readOut2; 

    $(document).mousemove(function(e) { 
     readOut1 = e.pageX; 
     readOut2 = e.pageY; 
     $('#var1').html(readOut1); 
     $('#var2').html(readOut2); 
    }); 

})​ 

http://jsfiddle.net/xSa2T/2/

Answer 3

Parece un problema de tiempo.

Esta línea

$('#var2').html(readOut2); 

va a ser llamado a document.ready, mientras que el evento MouseMove no ha sido llamado todavía, así readOut2 no tendrá un valor aún.

Answer 4

pero desea utilizar el valor fuera del sobre la función mousemove

Como las variables readOut1 y readOut2 no esté definida antes de que el controlador de eventos mousemove se ejecute, tendrá que llamar a cualquier código que utilice estas variables del manejador de mousemove.

Ejemplo:

$(document).mousemove(function(e) { 
    readOut1 = e.pageX; 
    readOut2 = e.pageY; 

    doStuffWithReadOuts(/* possibly passing readouts as arguments instead... */); 
}); 

function doStuffWithReadOuts() { 
     $('#var1').html(readOut1); 
     $('#var2').html(readOut2); 
}