Question

下面的代码工作正常，但定时器低于0，即-1，-2，...等

如何在浏览器处于后台时自动暂停计时器并在我们使用它时恢复计时器？

我的计时器仅在我点击图像时启动。

   <script type="text/javascript">
/*<![CDATA[*/

var zxcMatch={

 Reset:function(id){
  var o=this[id],z0=0;
  if (o){
   clearTimeout(o.to);
   o.time[1]=null;
   for (;z0<o.imgs.length;z0++){
    o.imgs[z0].style.visibility='visible';
   }
   o.cnt=z0/2;
   o.lst=null;
  }
 },

 init:function(o){
  var id=o.ParentID,imgs=document.getElementById(id).getElementsByTagName('IMG'),z0=0;
  o.imgs=imgs;
  for (;z0<imgs.length;z0++){
   this.addevt(imgs[z0],'mouseup','match',o,imgs[z0]);
  }
  o.time=[typeof(o.Timer)=='function'?o.Timer:null];
  o.cnt=z0/2;
  this[id]=o;
 },

 match:function(o,img){
  if (o.time[0]&&!o.time[1]){
   o.time[1]=new Date();
   o.to=setInterval(function(){ o.time[0](o,Math.floor((new Date()-o.time[1])/1000)); },1000);
  }
  if (!o.lst){
   o.lst=img;
  }
  else {
   if (o.lst.className==img.className&&o.lst!=img){
    img.style.visibility=o.lst.style.visibility='hidden';
    o.cnt--;
    if (o.cnt==0){
     clearTimeout(o.to);
     o.time[1]=null;
     o.Complete();
    }
   }
   else {
    alert('try again');
   }
   o.lst=null;
  }
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 }


}

zxcMatch.init({
 ParentID:'match-holder',
 Timer:function(o,sec){
  document.getElementById('count').innerHTML=30-sec;
  if (sec>29){
    alert('Time Out');

  }
 },
 Complete:function(){
//  window.top.location='http://www.stackoverflow.com/';
 }
});
/*]]>*/
</script>
<span id="count" ></span>

Answer 1

如果用户正在关注文档或不使用此文件，您可以收听：

if (/*@cc_on!@*/false) { // check for Internet Explorer
    document.onfocusin = onFocus;
    document.onfocusout = onBlur;
} else {
    window.onfocus = onFocus;
    window.onblur = onBlur;
}

以下是我如何使用上述内容的示例：

var windowIsFocused = true;
var lastTimeStamp = 0;
function onFocus(event){
    if(!event || event.lastTimeStamp < lastTimeStamp - 10) return; //prevent double counting in safari and chrome
    lastTimeStamp=event.lastTimeStamp||0;
    windowIsFocused=true;
    //Add timer resume here
};
function onBlur(event){
    if(!event || event.lastTimeStamp < lastTimeStamp - 10) return; //prevent double counting in safari and chrome
    lastTimeStamp=event.lastTimeStamp||0;
    windowIsFocused=false;
    //Add timer pause here
}
if (/*@cc_on!@*/false) { // check for Internet Explorer
    document.onfocusin = onFocus;
    document.onfocusout = onBlur;
} else {
    window.onfocus = onFocus;
    window.onblur = onBlur;
}

如何在我的代码中为计时器添加暂停和恢复事件

1 个答案: