如何实现用户无交互时淡出按钮div，交互时保持显示？

问题分析与修复方案 #

原代码的核心问题 #

1. timer变量定义在事件处理函数内部，每次触发交互事件都会重新创建新的timer，导致之前设置的定时器无法被清除，无法实现“停止交互2秒后消失”的逻辑。
2. 选择器:visible的写法错误，多了不必要的反斜杠，正确写法是:visible。

修复后的代码 #

var grid = $('#grid');
var timer; // 将timer变量提升到外部，确保所有事件回调共享同一个定时器引用
var circleBtn = $('.circle-button'); // 提前缓存DOM元素，提升性能

// 使用on()替代bind()（bind()在jQuery 3.0+已被弃用）
grid.on('mousemove touchmove tap swipeleft swipeup swipedown swiperight', function() { 
    // 每次交互先清除之前的定时器，重置计时
    if (timer) {
        clearTimeout(timer);
    }

    // 按钮未显示时，淡入展示
    if (!circleBtn.is(':visible')) {
        circleBtn.fadeIn('slow');
    }

    // 重新设置定时器：停止交互2秒后淡出按钮
    timer = setTimeout(function() {
        circleBtn.fadeOut('slow');
    }, 2000);
});

关键优化点 #

• 把timer变量放在事件处理函数外部，保证每次交互都能访问并修改同一个定时器实例，实现“持续交互则重置计时”的需求。
• 提前缓存$('.circle-button')，避免每次事件触发都重复查询DOM，提升性能。
• 简化逻辑：不管按钮当前状态，每次交互都先清除旧定时器，再控制显示并设置新定时器，逻辑更清晰可靠。

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