Question

我有一个绑定到mousemove处理程序的事件处理程序，它将通过console.log（）记录当前鼠标位置。我的目标是每秒触发事件不超过5次，以防止每当我被淹没移动我的鼠标。

目前，我有下面的代码，每次移动时记录鼠标位置，但不会限制它，我似乎无法弄清楚出了什么问题

//Code runs after document is ready

function logMouse(event){
    console.log('The mouse is currently at ('+event.pageX+','+event.pageY+')');
  }
  $(document).on('mousemove',function(event){
    setTimeout(function(){
      logMouse(event);
    },200);
  });

我试图通过使用setTimeout来限制mousemove事件，并将计时器设置为200 mse，这样它将在1秒内触发5次，但是我的代码不能正常工作，目前只是给了我一块鼠标我移动鼠标时的位置。

如何限制我的鼠标移动，以便它每秒记录鼠标的位置不超过5次？

Answer 1

我在整个项目中使用这个包装函数。不幸的是，在撰写本文时，我不知道正确的术语throttling。

// ignore fast events, good for capturing double click
// @param (callback): function to be run when done
// @param (delay): integer in milliseconds
// @param (id): string value of a unique event id
// @doc (event.timeStamp): http://api.jquery.com/event.timeStamp/
// @bug (event.currentTime): https://bugzilla.mozilla.org/show_bug.cgi?id=238041
ignoredEvent: (function () {
    var last = {},
        diff, time;

    return function (callback, delay, id) {
        time = (new Date).getTime();
        id = id || 'ignored event';
        diff = last[id] ? time - last[id] : time;

        if (diff > delay) {
            last[id] = time;
            callback();
        }
    };
})(),

你可以像这样使用它：

$(document).on('mousemove',function(event){
    ignoredEvent(function(){
        logMouse(event);
    }, 200, 'mouse-move');
});

Answer 2

我会这样做，带变量。

var wait = false;
$(document).on('mousemove',function(event){
    if(!wait){
        logMouse(event);
        wait = true;
        setTimeout(function(){ wait = false; },200);
    } 
});

限制mousemove事件每秒触发不超过5次

2 个答案: