自动更新 Javascript

Question

我想要 div 当鼠标在 x 距离内时移动。

$(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 - 你必须 select jquery 1.11.0 库

但是因为条件是在mousemove函数里面，它只能在鼠标移动的时候移动元素，相反当鼠标在 x 距离内时移动。

为此我需要某种更新，检查是否每一帧都满足条件。

例如，在 Pascal 中，对于我的项目，我会将整个代码放在 repeat until ()

之间

在 ActionScript 中有 addEventListener(Event.ENTER_FRAME, function);

我可以在 Javascript 中使用什么？ 您还会想出哪些其他方法？ - 我确实找到了这个 Javascript Version of AS3 enterframe event 但它已有 4 年历史，现在可能有所不同。

把代码放在setInterval函数里面可以吗？

Answer 1

您正在寻找 requestAnimationFrame 方法。

它有什么作用？在渲染下一帧之前，它将执行传递给它调用的方法。但请注意，并非所有浏览器都支持它，您可以为其使用 polyfill 或仅使用 setInterval

示例：

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

更多信息：

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

Answer 2

您有两种方法可以做到这一点：

在文档对象上添加事件侦听器并测量元素位置和鼠标位置，然后检查当前鼠标位置是否在这些位置之间。（如果你只有一个元素，不建议使用这种方式）
直接在元素上添加事件监听器，并检查当前鼠标位置是否与您想要的位置完全相同。

如果您有一个编写良好的鼠标事件侦听器，则不需要使用间隔更新函数。

Answer 3

我会尝试在 mousemove 方法之外声明您的鼠标 X 和 Y 变量，这样即使您的鼠标停止移动，最后的位置（实际上是当前位置）仍然可以访问..

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

然后，您可以在间隔上使用第二种方法来检查这些变量中的值，并相应地移动框..

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

自动更新 Javascript

Auto-Update Javascript

javascript

function

auto-update