如何在保留鼠标/元素坐标访问权的同时将mousemove更改为setInterval？

Question

I'd like to change this to setInterval but I don't know how to do this while keeping access to e.pageX, e.pageY, elem, etc. How can I change this to setInterval (or is there an event in jquery that does the same thing as setInterval but is an event)?

http://jsfiddle.net/f1Lzqxom/

$(function(){

$(document).on( "mousemove", MouseMove );

var cachedElems = $( '.tracker' );

function MouseMove(e){
    var pageX = e.pageX,
        pageY = e.pageY;

    $.each(cachedElems, function(i,elem){
        elem = $(elem);

        var elemX = pageX - elem.offset().left,
            elemY = pageY - elem.offset().top;

        $(elem).text(
            'page x: ' + pageX + '\n' +
            'page y: ' + pageY + '\n' +
            '\n' +
            'elem x: ' + elemX + '\n' +
            'elem y: ' + elemY + '\n'
        );

    });
}

});

Answer 1

Change ...

function MouseMove(e){
    ...
}

... to ...

$(document).mousemove(function(e){
  window.mouseXPos = e.pageX;
  window.mouseYPos = e.pageY;
}); 

The above code will attach mouse movements to global variables that you can reference inside the setTimeout .

setInterval(function() {
    var pageX = window.mouseXPos,
        pageY = window.mouseYPos;

    $.each(cachedElems, function(i,elem){
        elem = $(elem);

        var elemX = pageX - elem.offset().left,
            elemY = pageY - elem.offset().top;

        $(elem).text(
            'page x: ' + pageX + '\n' +
            'page y: ' + pageY + '\n' +
            '\n' +
            'elem x: ' + elemX + '\n' +
            'elem y: ' + elemY + '\n'
        );

    });
}, 1000);

... with a minor change in variable declaration of pageX and pageY to use the new globals.

NOTE :

Having provided the answer I did, I would be careful about having a document-level, always-running mousemove event, even if you're only polling for cursor position. This is a lot of processing and can bog down any browser, particularly slower ones like IE.

A problem like this almost certainly raises the question of design decision: if you don't need to handle a mouse event to poll for the cursor position, do you really need the cursor position? Is there a better way to solve the problem you're trying to solve?

UPDATE :

Stopping the set interval can be done this way.

var intervalId = setInterval(function() {
  ...
}, 1000);

/* Later */
clearInterval(intervalId);