reset countdown on mousemove

Question

i´m trying since hours but i didn´t get a solution for this problem.

how can i set the countdown to 10 again when the mouse is moving? here is the codepen link:

var timeout = null;

$(document).on('mousemove', function() {
    if (timeout !== null) {
    }

    timeout = setTimeout(function() {
      var timer = 10;
      var interval = setInterval(function() {
       timer--;
      $('.timer').text(timer);
      if (timer === 0) clearInterval(interval);
      }, 1000);
        
    }, 100);
});

.timer {
  position: relative;
  font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timer">10</div>

Answer 1

Look at this for understanding...

var interval;
var time;

$(document).on('mousemove', function() {
    
    clearInterval(interval);
    time=10;
    interval = setInterval(loop, 1000)
        
   
})

function loop(){
   time--;
   $('.timer').text(time);
   if (time <=0 ) clearInterval(interval);
  }
  

.timer {
  position: relative;
  font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timer">10</div>