javascript - 如何以毫秒为单位测量页面上的 mousemove？

Question

我如何测量页面上鼠标移动的毫秒数？所以，当用户在页面上移动鼠标超过 5 秒时，我需要 alert('Message');。

var showtime = 5000; // milliseconds
var currenttime = 0; // milliseconds

document.onmousemove = function(e){
    // How i can measure time? (increase `currenttime` in milliseconds)
    if(showtime <= currenttime) {
        alert('Message');
    }
};

Answer 1

你必须做这样的事情，使用 throttle (我使用了 300 毫秒)，然后取消超时等。

var showtime = 5000; // milliseconds
var currenttime = 0; // milliseconds
var timer;

document.onmousemove = function(e){
    currenttime = currenttime ? currenttime : Date.now();

    clearTimeout(timer);
    timer = setTimeout(function() {
        currenttime = 0;
    }, 300);

    if ( (Date.now() - currenttime) > showtime) {
        currenttime = 0;
        alert('Message');
    }
};

FIDDLE

---

对于鼠标移动的总时间，原理是一样的，还是要节流，把鼠标移动的时间加起来。在最后一次鼠标移动后触发，并且值超过 5 秒

var showtime  = 5000; // milliseconds
var starttime = 0;    // milliseconds
var totaltime = 0;
var timer;

document.onmousemove = function(e){
    starttime = starttime ? starttime : Date.now();
    clearTimeout(timer);

    timer = setTimeout(function() {
        totaltime += Date.now() - starttime;
        starttime = 0;
    }, 300);

    if (totaltime > showtime) {
        alert("Message");
    }
};

FIDDLE