javascript - 如何检查1秒内是否触发了mousemove事件

Question

我有一个 canvas 元素和一个 div.coordinates 元素，当鼠标在 Canvas 上移动时它们会跟随鼠标移动。如果鼠标在最后 1 秒内没有在 Canvas 上移动，我想要做的是让 .coordinates 消失。

HTML

<canvas></canvas>

CSS

canvas {
  max-width: auto;
  outline: 1px solid #283028;
  align-self: center;
}

.coordinates {
  top: 50px;
  position: absolute;
  height: 40px;
  width: 60px;
  background-color: rgba(20, 20, 20, 0.3);
  border-radius: 10px;
  display: none;
}

JS

let coordinates = document.createElement("div");
coordinates.className = "coordinates";


let time = undefined;
const trackCanvasMouse = (e) => {
  if (!time) {
    time = Date.now();
  }
  setTimeout(() => {
    if (time == Date.now()) {
      coordinates.style.display = "none";
      time = undefined;
    }
  }, 1000);
  coordinates.style.top = `${e.clientY}px`;
  coordinates.style.left = `${e.clientX}px`;
  coordinates.style.display = "inline";
};

const canvas = document.querySelector("canvas");
canvas.addEventListener("mousemove", trackCanvasMouse);

canvas.width = 520;
canvas.height = 520;


document.querySelector("body").appendChild(coordinates);

我尝试使用 Time.now() 和 setTimeout 来查看事件是否已被触发，但无法使其工作。

谢谢你的时间

Answer 1

这将在鼠标移动时显示跨度坐标，并在鼠标停止一秒钟后消失。您要做的是跟踪之前的超时并在每次触发 mousemove 事件时取消它。

let timeout;
const coords = document.getElementById('coords');
document.addEventListener("mousemove", function() {
  coords.style.display = "block";
  if (timeout) {
    clearTimeout(timeout);
  }
  timeout = setTimeout(function() {
    coords.style.display = "none";
  }, 1000)
});

#coords {
  display: none;
}

<span id="coords">Coords</span>