Javascript停止循环悬停?

Question

我想让一个元素在鼠标悬停时连续执行一个函数当我把鼠标移开时停止执行，但现在我只能开始，不知道如何让它停止

HTML:

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

JS:

function randomize(id) {
let element = document.getElementById("link" + id);
element.innerHTML = "Ho" + makeid(2);
}
//generates random letters
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;
}
//makes it repeat itself
function randomizeHover(id) {
console.log("Hello?");
setInterval(() => {
randomize(id);
}, 200);
}

Answer 1

添加清除间隔的mouseleave事件侦听器:

function randomize(id) {
let element = document.getElementById("link" + id);
element.innerHTML = "Ho" + makeid(2);
}
//generates random letters
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;
}
//makes it repeat itself
let interval;
function randomizeHover(id) {
console.log("Hello?");
interval = setInterval(() => {
randomize(id);
}, 200);
}
function stopRandomizer(){
clearInterval(interval)
}

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