JavaScript如何实现mouseenter触发后循环执行代码直到鼠标移出元素

你的问题核心是没有在鼠标移出时清除定时任务，递归创建的setTimeout会一直循环执行。另外你的代码里存在拼写错误：addEventListner应为addEventListener，少了字母e。
具体实现可以参考以下逻辑：

• 在事件回调外部声明变量存储定时器ID，保证mouseenter和mouseleave两个事件回调都能访问到该变量
• mouseenter触发时启动定时任务，将返回的定时器ID存入变量
• mouseleave触发时清除对应的定时器，终止循环执行

完整代码示例 #

递归setTimeout版本（和你原有实现逻辑对齐） #

const divItem = document.getElementById("option")
// 存储定时器ID，作用域覆盖两个事件回调
let timerId = null

divItem.addEventListener("mouseenter", () => {
    // 先清除已有定时器，避免重复hover导致多个定时器同时运行
    if (timerId) clearTimeout(timerId)
    
    const timeoutEvent = () => {
        console.log("Mouse is entered")
        timerId = setTimeout(timeoutEvent, 4000)
    }
    // 首次触发立即执行一次，也可以删除这行调整为4秒后第一次执行
    timeoutEvent()
})

divItem.addEventListener("mouseleave", () => {
    // 鼠标移出时清除定时器
    if (timerId) {
        clearTimeout(timerId)
        timerId = null
    }
})

setInterval版本（逻辑更直观） #

const divItem = document.getElementById("option")
let intervalId = null

divItem.addEventListener("mouseenter", () => {
    if (intervalId) clearInterval(intervalId)
    // 首次触发立即打印
    console.log("Mouse is entered")
    intervalId = setInterval(() => {
        console.log("Mouse is entered")
    }, 4000)
})

divItem.addEventListener("mouseleave", () => {
    if (intervalId) {
        clearInterval(intervalId)
        intervalId = null
    }
})

内容的提问来源于stack exchange，提问作者Mayukh Chakraborty