JavaScript如何实现鼠标悬停启动循环执行函数、移开后停止循环？

AI 小北

2026-10-1

实现方案

你需要把setInterval返回的定时器ID存储起来，鼠标移出元素时调用clearInterval清除这个定时器即可实现停止执行的效果。

修改后的代码

HTML代码

<a onmouseover="randomizeHover(1)" onmouseout="stopRandomize(1)" id="link1" class="link" href="#">Home</a>

JS代码

// 全局对象存储不同id对应的定时器，兼容多元素场景
const hoverTimers = {}

function randomize(id) {
  let element = document.getElementById("link" + id);
  element.innerHTML = "Ho" + makeid(2);
}

// 生成随机字母
function makeid(length) {
  var result = "";
  var characters = "abcdefghijklmnopqrstuvwxyz";
  var charactersLength = characters.length;
  for (var i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}

// 悬停启动定时执行
function randomizeHover(id) {
  console.log("定时器启动");
  // 启动前先清除已有定时器，避免重复触发导致多定时器并行
  if (hoverTimers[id]) clearInterval(hoverTimers[id]);
  // 存储当前id对应的定时器ID
  hoverTimers[id] = setInterval(() => {
    randomize(id);
  }, 200);
}

// 移出停止定时执行
function stopRandomize(id) {
  // 清除对应定时器
  if (hoverTimers[id]) {
    clearInterval(hoverTimers[id]);
    hoverTimers[id] = null;
    // 可选：恢复元素原本的文本内容
    document.getElementById("link" + id).innerHTML = "Home";
  }
}