在浏览器中的标签之间切换时停止计时器

Here is my script written
I want to stop timer when user switch to different tabs and resume back when visit the site. can anyone help me to solve this task.

$(document).ready(function() {   
      window.setInterval(function() { 
      var timeLeft    = $("#timeLeft").html();                                 
          if(eval(timeLeft) == 0){ 
                  window.location= ($("#url_online").html());                  
          }else{               
              $("#timeLeft").html(eval(timeLeft)- eval(1)); 
          } 
      }, 1000);  
      
  }); 
  
  var time=$("#times").html(); 
  var tt=time.split(":"); 

  var seconds =tt[0]*60+tt[1]*1; 
  function secondPassed() { 
      var minutes = Math.round((seconds - 30)/60); 
      var remainingSeconds = seconds % 60; 
      if (remainingSeconds < 10) { 
          remainingSeconds = "0" + remainingSeconds;   
      } 
      document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds; 
      if (seconds == 0) { 
          clearInterval(countdownTimer); 
          document.getElementById('countdown').innerHTML = "Buzz Buzz"; 
      } else { 
          seconds--; 
      } 
  } 
    
  var countdownTimer = setInterval('secondPassed()', 1000);

<p id="times"> 2:50</p>
Redirect You In  <span id="timeLeft">40</span> secs..

</div>

You can use $(window).focus() and $(window).blur() event.

Example:

https://jsfiddle.net/72cLu8c0/

I done the task with following code and working fine in my php project.

<script src="http://newnuk.com/newnuk/newnuk/themes/newnuk/assets/js/jquery.min.js"></script>
<script type="text/javascript">
function startTimer(duration, display) {
    
    var timer = duration, minutes, seconds;
    var a=duration;
    setInterval(function () {
        if (window.isActive) { 
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        
        //interval check and calling function  
         a=parseInt(a, 10)-1;
         if(a==0) {
            
             showpanel();
             $('#timer1').hide();
             
             return false;
         }
         
        display.text(minutes + ":" + seconds);
        
        if (--timer < 0) {
        alert('hi');
            timer = duration;
            
        }
        
        }
        
    }, 1000);
}

jQuery(function ($) {
    
    
    
    var fiveMinutes =<?php echo $time ;?>,
        display = $('#time');
    startTimer(fiveMinutes, display);
     
    
    

 // use setTimeout() to execute
 //setTimeout(showpanel, 181000)
});

$(function() {
    window.isActive = true;
    $(window).focus(function() { this.isActive = true; });
    $(window).blur(function() { this.isActive = false; });
    showIsActive();
});

function showIsActive()
{
    console.log(window.isActive)
    window.setTimeout("showIsActive()", 2000);
}



function showpanel() {     
  var dataString = 'adv='+'MTE=';
  
   $.ajax({
     type: "POST", 
     url: baseurl + "advs/viewed_adv/true", 
     dataType: "json", 
   data: dataString,
   cache: false,
     success: function(json) {
    
     if(json.viewed==true)
     {
         
        
        $('#viewed_sucess').show();
        $('#timer1').hide();
     }
      
     }
  
    }); 
 }
</script>

 <div style="font-size:40px; font-weight:bold;" id="timer1"><span id="time" style="color:red;"></span></div> 
 <?php 
    $timer_var = 65;
 
 ?>

</div>