自动更新Javascript

Question

I want a div to move when the mouse is within x distance from it.

$(document).mousemove(function(e) {  
        mX = e.pageX;
        mY = e.pageY;

        distance = calculateDistance(element, mX, mY);

        if (distance<100) {
            $(element).css("left", moveAcc + "px");
            moveAcc = moveAcc + 1;
        }         
    });

JSFiddle - You have to select jquery 1.11.0 library

But because the condition is inside the mousemove function , it can only move the element when the mouse is being moved too, as opposed to moving when mouse is within x distance.

For this I need sort of an update thingy, something to check if conditions are met every frame.

Example, in Pascal for my projects I'd put the whole code in between the repeat until ()

In ActionScript there's addEventListener(Event.ENTER_FRAME, function);

What can I use in Javascript? What other ways would you come up with? - I did found this Javascript Version of AS3 enterframe event but it is 4 years old, migh be different now.

Is it ok to put the code inside setInterval function?

Answer 1

You're looking for the requestAnimationFrame method.

What it does ? It'll execute the method passed on it call before the next frame get rendered. But beware, not all browsers support it, you can use a polyfill for it or just an setInterval

Example:

function checkDistance () {
    \\ Do your job here
    window.requestAnimationFrame(checkDistance);
}
window.requestAnimationFrame(checkDistance);

More info:

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Answer 2

You have two ways to do that:

1. Add an event listener on the document object and measure the element positions and the mouse positions, then check if the current mouse position is between those positions. (This way not suggested if you have just one element)
2. Add an event listener on the element directly and check if the current mouse position is exactly the same position you want.

If you have a well written mouse event listener, then you don't need to update the function using interval.

Answer 3

I would try declaring your mouse X and Y variables outside the mousemove method, that way even when your mouse stops moving, the last position (current really) is still accessible..

var mX;
var mY;
$(document).mousemove( function(e) {
    mX = e.pageX; 
    mY = e.pageY;
});

Then, you can have a second method on an interval that can check against the values in those variables, and move the box accordingly..

setInterval(function(){

    // Code to calculate distance etc.

    distance = calculateDistance(element, mX, mY);

    if (distance<100) {
        $(element).css("left", moveAcc + "px");
        moveAcc = moveAcc + 1;
    }   

},100); // Whatever interval you see fit instead of 100ms