js怎么写hover时间

<div id="hoverElement">Hover over me!</div>

#hoverElement {
  width: 200px;
  height: 100px;
  background-color: blue;
  color: white;
  text-align: center;
  line-height: 100px;
  transition: background-color 0.3s;
}

#hoverElement.hovered {
  background-color: red;
}

const hoverElement = document.getElementById('hoverElement');
let timeoutId;

hoverElement.addEventListener('mouseenter', () => {
  // 清除之前的定时器，防止多次触发
  clearTimeout(timeoutId);
  
  // 设置新的定时器，在指定时间后添加hovered类
  timeoutId = setTimeout(() => {
    hoverElement.classList.add('hovered');
  }, 500); // 500毫秒（0.5秒）后触发
});

hoverElement.addEventListener('mouseleave', () => {
  // 清除定时器，防止hovered类被添加
  clearTimeout(timeoutId);
  
  // 移除hovered类
  hoverElement.classList.remove('hovered');
});