сброс обратного отсчета на mousemove

Question

Я пытаюсь с часами, но я не получил решение этой проблемы.

Как я могу настроить обратный отсчет до 10 раз, когда мышь перемещается? вот codepen ссылка:

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

Посмотрите на это для понимания. ..

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>

Answer 2

В зависимости ожидаемое поведение, вы можете использовать следующий фрагмент кода:

var interval; 
 
$(document).on('mousemove', function() { 
 
    clearInterval(interval); 
 
    var coutdown = 10, $timer = $('.timer'); 
 
    $timer.text(coutdown); 
 
    interval = setInterval(function() { 
 
     $timer.text(--coutdown); 
 
     if (coutdown === 0) clearInterval(interval);   
 
    }, 1000); 
 
}).mousemove();

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

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

Answer 3

Вам не обязательно нужно SetTimeout, вы можете сделать это с помощью setInterval функцию, которая проверяет номер внутри DIV и уменьшает его на единицу, и очищает себя, когда число достигает 0 .

Затем на mousemove снова установите текст в «10» и вызовите функцию, задающую интервал.

var timer = null; 
 
function setTimer(){ 
 
    timer = setInterval(function(){ 
 
     var countdown = parseInt($('.timer').text());  
 
     $('.timer').text((--countdown).toString()); 
 
     if(countdown===0) clearInterval(timer); 
 
    },1000); 
 
} 
 

 
$(document).on("mousemove",function(){ 
 
    if(timer) clearInterval(timer); 
 
    $('.timer').text("10"); 
 
    setTimer(); 
 
}); 
 
setTimer();

.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>