javascript - 在 jQuery 中，当窗口不在焦点上时，如何让我的计数器停止？

Question

我有以下代码。倒计时有效，但是当窗口不在焦点时停止计时器不起作用。另外，我想在窗口处于焦点时恢复倒计时。

在我下面的代码中，该$(document).blur()事件不起作用，但是当我将 blur 替换为 时click()，它起作用了。blur()和文件有问题吗？

var tm;
$(document).ready(function(){    
   function countdown(){ 
         if (seconds > 0) {
            seconds--; 
            $('#timer_div').text(seconds);
            tm = setTimeout(countdown,1000);
            }
        if (seconds<=0){ 
            $('#timer').text('Go');
            }   
        } 

        var seconds = 50;
        $('#timer').html(seconds);
        countdown();

    });
    $(document).blur(function(){
        clearTimeout(tm);
        seconds++;
        $('#timer').text(seconds);

    });

Answer 1

var tm;
$(document).ready(function(){    
   function countdown(){ 
         if (seconds > 0) {
            seconds--; 
            $('#timer_div').text(seconds);
            tm = setTimeout(countdown,1000);
            }
        if (seconds<=0){ 
            $('#timer').text('Go');
            }   
        } 

        var seconds = 50;
        $('#timer').html(seconds);
        countdown();

    });
    $(document).blur(function(){
        clearTimeout(tm);
        seconds++;
        $('#timer').text(seconds);

    });

Answer 2

试试这个：

var counter;
$(document).ready(function(){

function countdown(){ 

     if (seconds > 0) {
        seconds--; 
        $('#timer_div').text(seconds);
        counter=setTimeout(countdown,1000);
        }
    if (seconds<=0){ 
        $('#timer').text('Go');
        }   
    } 




    var seconds = 50;
    $('#timer').html(seconds);
    countdown();

});


$(document).blur(function(){
    clearTimeout(counter);
    seconds++;
    $('#timer').text(seconds);

});