用户不活动时如何淡出div答案

【问题标题】：How to fade out div when user is inactive用户不活动时如何淡出div
【发布时间】：2015-11-05 11:53:40
【问题描述】：

这应该很容易，但我无法让它正常工作......我有一个 div 元素用作按钮。我不希望按钮一直可见，只是在用户触摸屏幕（用手指或鼠标）时出现，在不活动后保持可见一段时间（比如 2 秒）然后消失。

我不希望它在可见后 2 秒消失（因为我可以使用 jQuery 延迟），我希望它在用户停止与屏幕交互后 2 秒消失（即 #grid 元素在我的情况下）。只要用户触摸屏幕或移动鼠标，按钮就可见，当他停止该活动 2 秒后，按钮就会消失。

以下我有，它不起作用：

var grid = $('#grid');
    grid.bind('mousemove touchmove tap swipeleft swipeup swipedown swiperight', function(e) { 
        var timer; 
        var circle= $('.circle-button');
        if (!circle.is(":visible")) {
            //button is not visible, fade in and tell it to fade out after 2s
            $('.circle-button').fadeIn('slow');
            timer = setTimeout(function(){ $('.circle-button').fadeOut('slow') }, 2000);
        }    
        else {
            //button is visible, need to increase timeout to 2s from now
            if (timer) clearTimeout(timer);
            timer = setTimeout(function(){ $('.circle-button').fadeOut('slow') }, 2000);
        }    
    });

即使上述方法可行，对我来说似乎效率很低，为每个 mousemove 重新启动一个计时器（虽然不确定这是一个真正的问题）。如果有人可以帮助我提供一个有效的、合理有效的解决方案，将不胜感激。干杯！

--- 编辑 ----- 谢谢大家的回复，都很好。我最终在下面使用了 Rohan Veer 的建议，因为这对我来说似乎是最优雅的解决方案，不必在每次鼠标移动时重新启动计时器。

【问题讨论】：

首先，使用.on() insted of .bind() - 这是首选方法

标签： javascript jquery html timer settimeout

【解决方案1】：

试试这个——

<script type="text/javascript">
var idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
    idleTime = 0;
});
$(this).keypress(function (e) {
    idleTime = 0;
});
});

function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime > 2) { // 2 minutes
    // fade out div
}
}
</script>

【讨论】：

“试试这个”没有解释你做了什么或它如何解决 OP 的问题，只是有一点帮助

【解决方案2】：

您可以设置期望时间的超时，并在过去时将其隐藏。以下是Reference JSFiddle。

代码

var interval = null;

function initInterval(){
    if(interval)
        clear();
    
    showElement();
	interval = setTimeout(function(){
    	$(".btn").fadeOut();
        clear();
    },2000);
}

function clear(){
	window.clearInterval(interval);
    interval = null;
}

function showElement(){
	$(".btn").fadeIn();
}

function registerEvents(){
    console.log("Events registering");
	$(document).on("mousemove", function(){
    	initInterval();
    });
}

(function(){
	registerEvents();
})()

.btn{
    width:200px;
    background:blue;
    color:#fff;
    padding:5px;
    text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn">Will hide in 2 secs</div>

【讨论】：

【解决方案3】：

您的代码似乎非常接近可行的解决方案，我只做了一些细微的更改。几乎唯一的方法就是在每一步都设置一个计时器，但也要清除之前的计时器。

下面的代码根据你的描述工作。

var timer; 
var grid = $('#grid');
grid.bind('mousemove touchmove tap swipeleft swipeup swipedown swiperight', function(e) { 
    var circle= $('.circle-button');
    if (timer) clearTimeout(timer);
    if (!circle.is(":visible")) {
        circle.fadeIn('slow');
    }    
    timer = setTimeout(function(){ circle.fadeOut('slow') }, 2000);
});

#grid{
    width:200px;
    height: 100px;
    border: 1px solid black
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grid"></div>
<button class="circle-button">A button</button>

【讨论】：