在浏览器中的选项卡之间切换时停止计时器

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项目中正常工作。

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