JavaScript鼠标移动触发内容显示x秒后隐藏的问题排查

你当前的代码只在页面加载时设置了一次setTimeout，第一次隐藏后，后续鼠标移动只会显示内容，但没有重新触发隐藏的定时器，所以内容就一直停留在页面上了。

核心解决思路是：每次鼠标移动时，不仅要显示内容，还要重置隐藏定时器——也就是先清除之前还没执行的定时器（如果有的话），再重新设置一个新的倒计时。

以下是修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        #infoText{
            visibility: hidden;
            /* 可选：添加基础样式让内容更显眼 */
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div id="infoText" class="bodyOne">
        <p>some text</p>
    </div>

    <script>
        // 保存定时器ID，用于后续清除未执行的定时任务
        let hideTimer = null;
        // 提前获取元素，避免每次函数执行重复查询DOM
        const infoElement = document.getElementById('infoText');

        function showAndAutoHide() {
            // 第一步：显示内容
            infoElement.style.visibility = 'visible';
            
            // 第二步：清除之前未触发的定时器（如果存在）
            if (hideTimer) {
                clearTimeout(hideTimer);
            }
            
            // 第三步：设置新的定时器，15秒后隐藏内容
            hideTimer = setTimeout(() => {
                infoElement.style.visibility = 'hidden';
            }, 15000);
        }

        // 给整个文档绑定鼠标移动事件
        document.addEventListener('mousemove', showAndAutoHide);
    </script>
</body>
</html>

关键逻辑说明 #

1. hideTimer变量：用来存储每次创建的定时器ID，这样每次鼠标移动时，都能通过clearTimeout(hideTimer)取消之前还没触发的隐藏操作，避免多个定时器互相干扰。
2. 提前获取DOM元素：把getElementById放在函数外面，不用每次鼠标移动都重复查询DOM，小幅度提升性能。
3. 函数逻辑整合：把显示和重置定时器的逻辑放在同一个函数里，确保每次鼠标移动都能完整触发"显示→倒计时隐藏"的流程。

可选优化（针对高频触发场景） #

如果页面存在鼠标快速移动的情况，可以给mousemove事件加防抖处理，减少函数触发频率：

// 防抖函数
function debounce(func, delay = 100) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

// 绑定防抖后的事件处理函数
document.addEventListener('mousemove', debounce(showAndAutoHide));

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