Как выполнить функцию? Задача следующая если человек не использует мышку N времени то он переходит в режим ожидания и устанавливается таймер для выхода через N время!!! Как это сделать пытаюсь через setTimeout но получается что при движение мышки все равно выполняется функция а надо её отменить!!! Пытаюсь так но бред какой-то получается как это сделать правильно?
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<input id="sleep"
style="
border: none;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
position: absolute;
color: rgba(0, 0, 0, 0.0);"
onmousemove="this.value = event.pageX+':'+event.pageY">
<div id="t"style="position: absolute;" ></div>
<script>
function func() {
div = document.getElementById('t');
div.innerHTML = "<div style='width: 100px;height: 40px;background: black;color: white' >Выход</div>";
clearInterval(ex);
console.log('exit');
}
function ex() {
var s = $('#sleep').val();
if (!s){
div = document.getElementById('t');
div.innerHTML = "<div style='width: 100px;height: 40px;background: red;color: white' >Ожидание</div>";
setTimeout(func, 7000);
console.log('wait')
}else {
clearTimeout(func);
div = document.getElementById('t');
div.innerHTML = "<div></div>";
console.log('Here');
document.getElementById('sleep').value ='';
}
}
setInterval(ex,3000)
</script>
</body>
</html>