jquery/javascript - accessing variables from outside a function

Question

I'm trying to use a variable value outside of the function it was defined in. Thought I. just needed to declare the variable outside the function but that doesn't cut it. Gotta be an easy one for those who know?

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);
})​

Thanks to all, especially Andy E with the explaination and solution.

Answer 1

You're assigning to the variables via a callback function which is registered to an event handler. This means that when this runs:

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

readOut2 has a value of undefined because it hasn't been set by the mousemove handler function yet. That handler won't fire until the current queued code stops executing and the user moves their mouse. You could define a function in the same scope as the variables, and call that function from the mousemove handler.

Re: your comments on another answer, you could use a timer:

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

I guess you want to track cursor coordinates, check out the updated source code:

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

Seems like a timing problem.

This line

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

is gonna get called at document.ready, while the mousemove event hasn't been called yet, so readOut2 will not have a value yet.

Answer 4

but want to use the value outside the on mousemove function

As the variables readOut1 and readOut2 might not be set before the mousemove event handler is run you will have to call any code that will use these variables from the mousemove handler.

Example:

$(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);
}