有没有办法仅在事件持续一段时间后才触发功能

Question

我试图仅在用户将鼠标悬停在目标上一定秒数时才调用函数。因此它不会立即触发，也不会在一段时间后触发，而是仅在用户在整个时间范围内悬停时才会触发。如果这可以在 JavaScript 内完成，那就太棒了。提前致谢

Answer 1

只需要在鼠标悬停div时设置一个超时，当鼠标离开div时清除它。这样，只有当鼠标在 div 范围内停留 n 秒

时，回调才会被触发

const el = document.querySelector('.hover-me');

let timeoutHandler = null;
el.addEventListener('mouseenter', () => {
  timeoutHandler = setTimeout(() => alert('Hovered for 2 seconds'), 2000);
});

el.addEventListener('mouseleave', () => {
  if (timeoutHandler) clearTimeout(timeoutHandler);
  timeoutHandler = null;
});

div.hover-me {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

<div class="hover-me">Hover me</div>

有没有办法仅在事件持续一段时间后才触发功能

Is there a way to fire a function only if an event is sustained for a while

javascript

dom-events

mapbox-gl-js