jQuery - 仅在窗口处于活动状态时执行计时器

Question

我正在努力做到，每当有人点击我所拥有的链接时，它都会打开一个新页面。页面打开后，我想要一个进度条和一个计时器倒计时到零。

问题是，我只希望倒计时和进度条在窗口处于活动状态时倒计时/运行。当窗口/选项卡未激活时，我希望计时器/进度条停止。

我无法让它发挥作用。我不知道我做错了什么。

这是我的代码：

var time = <?php echo $time; ?>
$(function() {
        $('#iframe').load(function() {
            startCounter();

            $('#iframe').unbind('load');
        });
    });
    var isActive = true;
    window.onfocus = function() { isActive = true; };
    window.onblur = function() { isActive = false; };



    function checkfocus() {
        if(isActive = true){
            time=time-1;        
        } else {

        }   

    }
    function startCounter() {
        $('#counter').fadeOut('fast');
        setTimeout("$('#counter').fadeIn('fast')",1050);
        setTimeout("runCounter()",1000);

    }

    function runCounter() {

        if(time==0){
            $('#counter').html('<button class="butn blue" onclick="<?php echo $creditButtonName; ?>();">Click here to get credited!</button>');
        }
        else {
            $('#counter').html('You must view this advertisement for ' + time + ' more seconds!');
            startBar();                                                                     
            setTimeout("checkfocus()", 1000);   
            setTimeout("runCounter()",1000);

        }


    }


function startBar(){
    $('#bar').animate({
        width:'100%'
    }, <?php echo $time; ?>000);
}

此刻计时器将倒计时。当窗口不活动或任何东西时不停止。

我的另一个问题是：我怎么能这样做，当窗口没有激活时，进度条也会停止动画，然后在它出现时再次启动？