JavaScript鼠标悬停计时器需实现单次倒计时，避免重复激活

我明白你的问题了——现在每次鼠标悬停都会重置计时器，导致永远等不到15秒倒计时结束触发Hovered!，对吧？这是因为你每次触发mouseHover()时，都会先调用window.clearTimeout(timer)把之前的定时器清掉，然后重新创建一个新的，相当于每次悬停都“刷新”了倒计时，自然没法正常完成一次完整的计时。

核心解决方案：添加状态标记避免重复触发 #

我们可以新增一个状态变量，用来标记计时器是否已经启动过。只有当计时器还未启动时，才执行启动逻辑；后续的鼠标悬停则不再处理，确保计时器能完整走完15秒。

修改后的完整代码如下：

HTML部分 #

<span onmouseover="mouseHover()">Hover this text</span>
<div id="demo"></div>

JavaScript部分 #

// 状态变量：标记计时器是否已启动，初始为未启动
let timerStarted = false;
let timer;

function mouseHover() {
  // 仅当计时器未启动时，才执行启动逻辑
  if (!timerStarted) {
    startTimer();
  }
}

function startTimer() {
  // 标记计时器已启动，防止后续悬停重复触发
  timerStarted = true;
  // 设置15秒（15000毫秒）的倒计时
  timer = window.setTimeout(function(){
    document.getElementById("demo").innerHTML = "Hovered!";
  }, 15000);
}

可选：支持鼠标离开后重置状态 #

如果你希望用户鼠标离开元素后，再次悬停能重新触发倒计时，可以添加onmouseout事件来重置状态和清除当前计时器：

修改后的HTML #

<span onmouseover="mouseHover()" onmouseout="mouseOut()">Hover this text</span>
<div id="demo"></div>

补充的JavaScript函数 #

function mouseOut() {
  // 清除当前未完成的计时器
  window.clearTimeout(timer);
  // 重置状态，允许下次悬停重新触发
  timerStarted = false;
}

这样调整后，第一次鼠标悬停会启动15秒倒计时，期间多次悬停不会打断计时；如果中途鼠标离开，计时器会被清除，下次悬停又能重新开始计时。

内容的提问来源于stack exchange，提问作者web-stars