jQuery倒计时暂停和重复

Question

我试图编码一些功能到页面，但我不能把所有的部分放在一起:-(

所有我想要的是一个简单的计数器计数到0，然后显示消息(.confirmation)。如果您破坏(移动鼠标或触摸键盘)计数器暂停并显示不同的消息(.警告)，并在几秒钟后从开始重复计数。Ufff…

我有监视用户动作和计数器的元素，但我不知道如何将它们加在一起:

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

试试这样做:

        //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);

我在这里所做的是引入另一个变量来表示我们正在暂停倒计时，并保持暂停剩余的秒数。

在间隔刻度中，我检查是否有暂停，并决定减少哪个值…

我没有测试它，但它应该工作。

更新

下面是更新后的代码，暂停结束后重新开始倒计时:

        //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);