javascript - 切换 mousemove mousestop 事件

Question

我的问题很简单。当我的鼠标移动时，我想执行一个函数，在 div 标记中打印 "you are moving" 。当我的鼠标不移动时，我希望文本功能消失。下面是我能想到的伪代码。例如，文本函数将每 50/1000 秒调用一次，并检查鼠标是否在移动。如果它在移动，则会显示文字。如果鼠标不移动，则不会显示文字。由于没有 mousestop 事件，我怎样才能实现这一点？

$(function() {  setInterval(text, 50);
});
function text() {
    /*Do something to check if mouse is moving*/
    /*if mouse is moving*/
    if{
        $("#shu").text("You are moving");
    } else {
        $("#shu").remove();
    }
}

Answer 1

纯 JavaScript 解决方案:

var shu = document.getElementById("shu");
var timeout;

document.addEventListener("mousemove", function() {
  shu.innerHTML = "You are moving";
  if (timeout) clearTimeout(timeout);
  timeout = setTimeout(mouseStop, 150);
});

function mouseStop() {
  shu.innerHTML = "";
}

jsFiddle