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

Question

这是我写的脚本 我想在用户切换到不同的标签时停止计时器，并在访问网站时恢复。任何人都可以帮我解决这个任务。

$(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.. 

Answer 1

您可以使用$(window).focus()和$(window).blur()事件。

示例：

https://jsfiddle.net/72cLu8c0/

Answer 2

我完成了以下代码的任务，并在我的php项目中正常工作。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;