jQuery:不常用火鼠移动事件

Question

我试图找出一种简洁的方法来聚合mousemove事件,以便我确保我的代码被调用,但每250-300毫秒只调用一次.

我曾考虑使用类似下面的内容,但想知道是否有更好的模式,或jQuery提供的东西会做同样的事情:

var mousemove_timeout = null;

$('body').mousemove(function() {
  if (mousemove_timeout == null) {
    mousemove_timeout = window.setTimeout(myFunction, 250);
  }
});

function myFunction() {
  /*
   * Run my code...
   */

  mousemove_timeout = null;
}

编辑:下面的接受的答案会很好地工作对于这种情况,但是,我发现,mousestop()在回答中提供的功能实际上消除了我需要的聚集,所以,如果你正在阅读这个问题,并寻找一个答案,查看是否mousestop插件是你真正需要的!

Answer 1

在我接受的答案中尝试了解决方案之后,我发现如果鼠标不断移动,特别是在圆周运动中,则会连续触发mousemove()事件,但鼠标坐标保持不变.所以我提出了一个更简单的解决方案,它消除了mousestop()和setTimeout.

$("body").mousemove(function (e) {
        if (enableHandler) {
            handleMouseMove(e);
            enableHandler = false;
        }
});

timer = window.setInterval(function(){
    enableHandler = true;
}, 100);

这将大约每100毫秒正确调用handleMouseMove().(请注意,我之前说过,因为JavaScript中的时间延迟和间隔不是实时保证的)

Answer 2

您的代码很好,除非您应该在将其设置为null之前清除超时,否则它可能会泄漏:

window.clearTimeout(mousemove_timeout);
mousemove_timeout = null;

作为替代方案,您可以将mousemove/mousestop与window.setInterval结合使用

var timer = null;
var isIntervalSet = false;

$('body').mousemove(function() {
    if (isIntervalSet) {
        return;
    }
    timer = window.setInterval(function() {
        /*
        * Run my code...
        */    
    }, 250);
    isIntervalSet = true;
}).mousestop(function() {
    isIntervalSet = false;
    window.clearTimeout(timer);
    timer = null;
});