自動更新Javascript

Question

當鼠標距離它的x距離時，我想要一個div移動。

$(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 - 您必須選擇jquery 1.11.0庫

但是因為條件在mousemove函數內 ，它只能在移動鼠標時移動元素， 而不是在鼠標在x距離內時移動。

為此，我需要一些更新東西，檢查每幀是否滿足條件。

例如，在我的項目的Pascal中，我將整個代碼放在重復之間直到（）

在ActionScript中有addEventListener（Event.ENTER_FRAME，function）;

我可以在Javascript中使用什么？ 你會想出什么其他方法？ - 我確實找到了這個AS3 enterframe活動的Javascript版本，但是它已經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

您有兩種方法可以做到這一點：

1. 在文檔對象上添加事件偵聽器並測量元素位置和鼠標位置，然后檢查當前鼠標位置是否在這些位置之間。 （如果你只有一個元素，這種方式不建議）
2. 直接在元素上添加一個事件監聽器，並檢查當前鼠標位置是否與您想要的位置完全相同。

如果你有一個編寫良好的鼠標事件監聽器，那么你不需要使用interval更新函數。

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