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

How can I change the mousemove to setInterval while retaining mouse/element coordinate access?

本文关键字：鼠标 移动 setInterval 访问权 保留 元素 访问 坐标 权限      更新时间：2023-09-26

>我想将其更改为setInterval，但我不知道如何在保持对e.pageX，e.pageY，elem等的访问的同时执行此操作。如何将其更改为 setInterval（或者 jquery 中是否有一个事件与 setInterval 执行相同的操作，但是一个事件）？

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

更改...

function MouseMove(e){
    ...
}

。自。。。

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

上面的代码会将鼠标移动附加到全局变量，您可以在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);

。变量声明 pageX 和 pageY 的微小变化以使用新的全局变量。

注：

在提供了我所做的答案后，即使您只是轮询光标位置，我也会小心使用文档级、始终运行的mousemove事件。这是大量的处理，可能会使任何浏览器陷入困境，尤其是像IE这样速度较慢的浏览器。

像这样的问题几乎肯定会引发设计决策的问题：如果您不需要处理鼠标事件来轮询光标位置，那么您真的需要光标位置吗？有没有更好的方法来解决您要解决的问题？

更新：

可以通过这种方式停止设置的间隔。

var intervalId = setInterval(function() {
  ...
}, 1000);
/* Later */
clearInterval(intervalId);
相关文章：