jQuery countdown pause and repeat

Question

I'm trying to code some feature to page, but I'm not able to put together all pieces :-(

All I want is simple counter which counts to 0 and then show message (.confirmation). If You disrupt (move mouse or touch keyobaord) counter pauses and show different message (.warning) and after few seconds repeat counting from begining. Ufff...

I've element for monitoring user action and conter but I don't know how to add this together:

       //monitors user action
        $('.warning, .confirmation').hide();

        $(document).bind('mousemove keydown', function() {
            $('.warning').show().delay(2000).fadeOut(500);
        }); 

        //counts for example from 5 seconds (this value is in the <span></span> in html section) 
        var sec = $('#box span').text()
        var timer = setInterval(function() {
           $('#box span').text(--sec);
           if (sec == 0) {
              $('.confirmation').show(function() {
                $(document).unbind();
              });
              clearInterval(timer);
           }
        }, 1000);

Answer 1

Try something like that:

        //countdown pause timer
        var countDownPauseTimer = 0;
        
        //monitors user action
        $('.warning, .confirmation').hide();

        $(document).bind('mousemove keydown', function() {
            countDownPauseTimer = 10; // Countdown will pause for 10 seconds
            $('.warning').show().delay(2000).fadeOut(500);
        }); 

        //counts for example from 5 seconds (this value is in the <span></span> in html section) 
        var sec = $('#box span').text()
        var timer = setInterval(function() {
           if (countDownPauseTimer > 0)
                countDownPauseTimer--;
           else
                $('#box span').text(--sec);
           if (sec == 0) {
              $('.confirmation').show(function() {
                $(document).unbind();
              });
              clearInterval(timer);
           }
        }, 1000);

What I did here is introduce another variable to indicate that we are pausing the countdown and to hold the number of seconds left for the pause.

In the interval tick I check if there is a pause and decide which value to decrement...

I didn't test it but it should work.

Update

Below is an updated code with the countdown restarting after pause ends:

        //countdown pause timer
        var countDownPauseTimer = -1;
        
        //monitors user action
        $('.warning, .confirmation').hide();

        $(document).bind('mousemove keydown', function() {
            countDownPauseTimer = 10; // Countdown will pause for 10 seconds
            $('.warning').show().delay(2000).fadeOut(500);
        }); 

        //counts for example from 5 seconds (this value is in the <span></span> in html section) 
        var sec = $('#box span').text();
        var timer = setInterval(function() {
           if (countDownPauseTimer > 0)
                countDownPauseTimer--;
           else if (countDownPauseTimer == 0) {
                countDownPauseTimer--;
                sec = $('#box span').text();
           }
           else
                $('#box span').text(--sec);
           if (sec == 0) {
              $('.confirmation').show(function() {
                $(document).unbind();
              });
              clearInterval(timer);
           }
        }, 1000);